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

2020年1月28日03:46:06
评论

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

除IE外都可识别

例子

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

方法:

加载CSS2

其次,各IE浏览器常用前缀(又是IE,我已经无力吐槽了)

*html *前缀只对IE6生效*+html [email protected] screen\9{...[email protected] \0screen {body { background: red; [email protected] \0screen\,screen\9{body { background: blue; [email protected] screen\0 {body { background: green; }} [email protected] screen and (min-width:0\0) {body { background: gray; }} [email protected] 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全兼容

实例代码:

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

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

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

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

附表:

企鹅博客
  • 本文由 发表于 2020年1月28日03:46:06
  • 转载请务必保留本文链接:https://www.qieseo.com/370393.html

发表评论