css hack--浏览器兼容性问题

雨点打透心脏的1/2处 2022-10-01 13:49 254阅读 0赞

## css hack–浏览器兼容性问题 ##

写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，不同的浏览器对css的解析结果是不同的，因此会导致相同的css输出的页面效果不同，这就需要css hack来解决浏览器局部的兼容性问题。使用css、 hack将会使用你的css代码部分失去作用，然后借助条件样式，使用其原css代码在一些浏览器解析，而css hack代码在符合条件要求的浏览器中替代原css那部分代码。

css hack除了可以处理与浏览器不兼容的CSS代码，也能够让我们通过css hack给不同版本的浏览器定制编写不同的CSS效果。

**css hack基本概念**  
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的

**CSS Hack常见的有三种形式**：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

1、属性级Hack：比如IE6能识别下划线”*”和星号” \* “，IE7能识别星号” \* “，但不能识别下划线”*”，而firefox两个都不能认识。

2、选择符级Hack：比如IE6能识别*html .class\{\}，IE7能识别*\+html .class\{\}或者\*:first-child+html .class\{\}。

3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。

PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

**各浏览器下Hack的写法**  
**1、Firefox**

@-moz-document url-prefix() \{ .selector \{ property: value; \} \}  
上面是仅仅被Firefox浏览器识别的写法，具体如：

@-moz-document url-prefix() \{ .demo \{ color:lime; \} \}  
支持Firefox的还有几种写法：

/\* 支持所有firefox版本 */ \#selector\[id=selector\] \{ property: value; \} 或者： @-moz-document url-prefix() \{ .selector \{ property: value; \} \} /* 支持所有Gecko内核的浏览器 (包括Firefox) \*/ \*>.selector \{ property: value; \}

**2、Webkit枘核浏览器(chrome and safari)**

@media screen and (-webkit-min-device-pixel-ratio:0) \{ Selector \{ property: value; \} \}  
上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0) \{ .demo \{ color: \#f36; \} \}

**3、Opera浏览器**

html:first-child>body Selector \{property:value;\} 或者： @media all and (min-width:0) \{ Selector \{property: value;\} \} 或者： @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) \{ head~body Selector \{ property: value; \} \}

上面则是Opera浏览器的Hack写法：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) \{ head~body .demo \{ background: green; \} \}

**4、IE9浏览器**

:root Selector \{property: value9;\}  
上面是IE9的写法，具体应用如下：

:root .demo \{color: \#ff09;\}

**5、IE9以及IE9以下版本**

Selector \{property:value9;\}  
这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“9”只能是“9”不能是别的，比如说“8”，不然会失去效果的，如：

.demo \{background: lime9;\}

**6、IE8浏览器**

@media \\0screen\{

Selector \{property: value;\} \}

**7、IE8以及IE8以上的版本**

Selector \{property: value\\0;\}  
这种写法只有IE8以及IE8以上版本支持，如

.demo \{color: \#ff0;\}

**8、IE7浏览器**

\*+html Selector\{property:value;\} 或 \*:first-child+html Selector \{property:value;\}  
上面两种是IE7浏览器下才能识别，如：

\*+html .demo \{background: green;\} 或者： \*:first-child+html .demo \{background: green;\}

**9、IE7及IE7以下版本浏览器**

Selector \{\*property: value;\}  
上面的写法在IE7以及其以下版本都可以识别，如：

.demo \{\*background: red;\}

**10、IE6浏览器**

Selector \{\_property/**/?**/value;\} 或者： Selector \{\_property: value;\} 或者： \*html Selector \{property: value;\}  
具体应用如下：

.demo \{\_width/**/?**/100px;\} 或者： .demo \{\_width: 100px;\} 或者： \*html .demo \{width: 100px;\}

**慎用\\0的CSS Hack**

在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而造成的，所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果，除非到了万不得已情况下，才考虑CSS的Hack。

**css hack兼容技巧**

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

2, 居中问题  
①.垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)  
②.水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE