CSS在IE6 EI7 IE8 Firefox下的兼容写法CSS Hack

        前端实现页面的时候,由于浏览器解析不同产生的BUG是另人头疼的。小东北这里根据自己碰到的问题多方查阅总结了一些处理方法分享给大家。

       先介绍一下CSS Hack。由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个内容我们称之为CSS Hack,CSS Hack大致有3种表现形式:CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。

       类内部CSS Hack比如 IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而firefox两个都不能认识等等。

       选择器CSS Hack比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等。

       HTML头部引用(if IE)Hack针对所有IE:<!–[if IE]><!–您的代码–><![endif]–>,针对IE6及以下版本:<!–[if lt IE 7]><!–您的代码–><![endif]–>,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。有些前端工程师采用写两套CSS在IE6或其他浏览器展示时分别引用。

下面举个例子写一些常用的浏览器兼容性处理方法

       .color{
       background-color: #CC00FF;     /*所有浏览器都会显示为紫色*/
       background-color: #FF0000\9;   /*IE6、IE7、IE8会显示红色*/
       *background-color: #0066FF;    /*IE6、IE7会变为蓝色*/
       _background-color: #009933;    /*IE6会变为绿色*/
       }

总结

  1. “\9”  所有IE识别,FireFox不识别。
  2. “*”  IE6、IE7可以识别,IE8、FireFox不能。
  3. “_”  IE6可以识别,IE7、IE8、FireFox不能。
  4. “!important”  IE6不识别,IE7/8, FF 识别。

       注意:浏览器优先级别:FF<IE8<IE7<IE6,CSS hack书写顺序一般为FF IE8 IE7 IE6。在都能识别的情况下重复定义的话按照最后一个来执行。

       CSS对浏览器器 的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍了一下兼容要点。好多css hack,最重要的是简单实用能解决问题就行了。

常见兼容问题

       1. DOCTYPE 影响 CSS 处理(但这个声明对于WEB标准的验证是非常重要的)

       2. FF: div 设置 margin-left, margin-right为auto 时已经居中, IE不行

       3. FF: body设置text-align时, div需要设置margin: auto(主要是 margin-left, margin-right)方可居中

       4. FF:设置padding后, div会增加height和width, 但IE不会, 故需要用!important多设一个 height和width。

       5. FF:支持!important, IE则忽略, 可用!important 为FF特别设置样式

       6. div的垂直居中问: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。

       7. FF:链接加边框和背景色,需设置display: block, 同时设置float: left保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

       8. margin加倍的问题,设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在 的bug,解决方案是在这个div里面加上display: inline。

例如:
       <div id=”afloat”></div>

相应的css为
       # afloat {
       float: left;
       margin:5px;      /*IE 下理解为10px*/
       display:inline;     /*IE下再理解为5px*/}

       希望对筒子们有所帮助呀:-)

One Reply to “CSS在IE6 EI7 IE8 Firefox下的兼容写法CSS Hack”

发表评论