CSS Hack代码与浏览兼容总结

文章目录

关于CSS Hack的东西能少尽量少吧。发现这篇文章我写得太复杂了,所以重新精简了一下,把代码粘贴到jsfiddle上,方面修改代码和维护。

1, IE条件注释法,微软官方推荐的hack方式。

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器上显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器上显示
<![endif]-->

只在IE6以上版本生效
<!--[if gt IE 6]>
这段文字只在IE6以上版本IE浏览器上显示
<![endif]-->

只在IE7上不生效
<!--[if ! IE 7]>
这段文字在非IE7浏览器上显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]><!-->
这段文字只在非IE浏览器上显示
<!--<![endif]-->

2.综合一下常用的CSS Hack代码

3.IE CSS Media,来自这里 3.IE CSS Media,来自这里

4.button重置css样式兼容ie6,ie7

button在IE6、IE7下的兼容性,需要充值css为overflow:visible

5.让IE6支持max-width,min-width

.sector{max-width:500px; _width:expression((documentElement.clientWidth>500)?"500px":"auto");

min-width:300px; _width:expression((documentElement.clientWidth<300)?"300px":"auto");}

6.IE6下某些情况line-height无效

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 同时以上元素的行高可能×2。
受影响的浏览器: Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6

解决办法:
对和文字相连接的img、input、textarea、select、object等元素加以属性:
{margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}

原创文章:CSS Hack代码与浏览兼容总结 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css-hacks.html)
评论已关闭。

“CSS Hack代码与浏览兼容总结”有6个评论

  1. 前端博客

    当小于或等于ie8 <!--[if lte IE 8]><![endif]-->

    登录回复
  2. 链接通知 : 前端开发规范文档 — 好JSER
  3. 不知子曰

    ie就是个奇葩。。。。

    登录回复
  4. 酷剑

    测试这篇评论

    登录回复
  5. 亲亲宝贝

    谢谢博主,我最近一直在学习HTML/CSS

    登录回复
    • 酷剑

      不用谢,大家一起进步吧

      登录回复