web开发之浏览器（五）浏览器兼容CSS hack_html/css_WEB-ITnose

2020年1月28日 03:46:06html教程评论277 views阅读模式

首先，仅仅IE支持的条件注释语句

除IE外都可识别

例子

这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,
如果把ELSE语句去掉,则正确.

方法：

加载CSS2

其次，各IE浏览器常用前缀（又是IE，我已经无力吐槽了）

*html *前缀只对IE6生效*+html *+前缀只对IE7生效@media screen\9{...}只对IE6/7生效@media \0screen {body { background: red; }}只对IE8有效@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效@media screen\0 {body { background: green; }} 只对IE8/9/10有效@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

再次，CSS特殊字符hack

「\9」、「*」、「_」「!important」

「\9」仅支持所有IE系列

「*」仅IE6，IE7

「_」仅IE6

「!important」仅IE7，firefox等

最后,各种特殊字符Hack实例验证

Hack应用情境（一）

适用范围：IE:6.0,IE7.0,IE8.0之间的兼容

实例代码：

.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

/*一个用于展示的class为bb的div标签*/

< div class ="bb">

Hack应用情境（二）

适用范围：IE:6.0,IE7.0,IE8.0,Firefox之间的兼容

实例代码：

.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

/*一个用于展示的class为bb的div标签*/

< div class ="bb">

Hack应用情境（三）

适用范围：IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容

实例代码：

.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

/*一个用于展示的class为bb的div标签*/

< div class ="bb">

Hack应用情境（四）（GOOD）

适用范围：IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome全兼容

实例代码：