欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-25 16:29:31
...
首先,仅仅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 >

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 >


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 >

Hack应用情境(四)(GOOD)

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

实例代码:

/***************************************** 各游览器兼容CSS **********************************************/
.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) 有效 */
@media all and (min-width: 0px){ .bb{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 仅 Opera 有效 */ }{}

.bb, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 识别 */}
@-moz-document url-prefix(){.bb{background-color:#4eff00;/*仅 Firefox 识别 */}}
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

/* 一般情况下 我们区分IE7 只用 +background-color 配合 _background-color 就行了 如果必须写 .bb, x:-moz-any-link, x:default 这样的代码区分 Firefox3.5及以下 则谨记此写法对IE7也有效,故在其中要再重写一次 +background-color 或者使用 * +html .bb{background-color:blue;} 方法仅对 IE7 有效。可使用 @-moz-document url-prefix(){} 方法独立区分所有 firefox */

.browsers td{width:8%;text-align:center;padding:8px;}}
.browsercolor{color:#333;font-size:18px;font-weight:bold;}
.ie6{background-color:#1e0bd1}
.ie7{background-color:#a200ff}
.ie8{background-color:#00deff}
.firefox{background-color:#4eff00}
.opera{background-color:#4cac70}
.other{background-color:#f1ee18;}

#tipTable td,#tipTable th{border:1px solid black;width:56px;height:16px;text-align:center;}
#wordTable td{margin-left:8px;}
#firefoxTip{display:none;}
#firefoxTip, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下 识别 */+display:none/*再区分一次IE7*/}
@-moz-document url-prefix(){#firefoxTip{display:block;/*仅 firefox 识别 */}}
#ChromeTip{display:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){#ChromeTip{display:block;}}{} /* safari(Chrome) 有效 */
@media all and (min-width: 0px){#ChromeTip{display:none\0;} /* 仅 Opera 有效 */ }{}

IE6 IE7 IE8 Firefox Opera Safari(Chrome)
IE6 IE7 IE8 Firefox Opera Safari(Chrome)

Opera的辨别色是深绿色,Opera游览器很时髦么。

Firefox的辨别色是浅绿色,Firefox是很强大的游览器。

Safari和Chrome的辨别色是金黄色,Safari和Chrome使用的都是Webkit内核

附表: