IE6，IE7，IE8，Firefox等浏览器兼容的css hack
一、开发平台的选择
我很幸运, 我接触网页前台的时候Firefox2 已经十分红火, 我的所有工作都是在Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在IE 做好再到别的浏览器兼容来得容易, 因为IE 对老标准支持还是很不错的, 而IE 的一些特有功能人家却不支持. 所以我推荐以Firefox 结合Firebug 扩展作为平台.
可维护：在资源成本和完美间平衡的向后兼容
可读：省力、易记电饼铛美食食谱大全小视频
二、Hack 的顺序
使用Firefox 作为平台, 只要代码写得够标准, 其实要Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,
顺序如下:
Firefox -> IE8 -> IE7 -> IE6 -> 其他
三、CSS 选择器Hack
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and
(-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}
这种写法的优缺点是：
优点：全面，各种HACK都有；清理无用代码里易认
缺点：选择器名称不易记；代码量多（要重复写选择器）
四、CSS 属性Hack
.sofish{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */关于学习态度的成语
}
这种写法的优缺点是：
优点：易记；代码少
缺点：不全面
五、IE 注释
<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->
这种写法的优缺点是：
5个月的胎儿优点：安全；向后兼容好；易维护
缺点：用不好会增加HTTP请求；用得好代码又多六、浏览器探测：JS/后端程序判断
关于产后修复// 以jQuery为例，检测是否是IE6，是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6');
}
这种写法的优缺点是：
优点：全面；易维护；可读性高
缺点：占资源；代码量大（要重写选择器）
总结：-----------------
1、尽量使用单独HACK
这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；
2、向后兼容的目标：1年
你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px\0；这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；
3、尽可能省资源
你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。
-----------------
七、Hack 的方法
说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
1. 同一文件中处理.
如: id="bgcolor" 的控件要在IE6 中显示蓝, IE7 中显示绿, Firefox 等其他浏览器中显示红.
#bgcolor {
background:red !important; /* Firefox 等其他浏览器*/
background:blue; /* IE6 */
}
*+html #bgcolor {
background:green !important; /* IE7 */
}
IE6 不认!important, 也不认*+html. 所以IE6 只能是blue.
IE7 认!important, 也认*+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是red, blue 和green, 但green 的优先度最高.
Firefox 和其他浏览器都认!important. !important 优先, Firefox 可以是red 和blue, 但red 优先度高.
上述的优先符号均是CSS3 标准允许的, 其他浏览器也还有其他的Hack 方法, 但我迄今还没遇到过Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见(JavaScript 除外).
台阶ppt2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗W3C
的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为IE 服务. 将所有符合W3C 的代码写到一个里面去, 而一些IE 中必须的, 又不能通过W3C 验证的代码(如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.
<!-- 放置所有浏览器的样式-->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- 只放置IE 必须的, 而不能通过W3C 的代码-->
<!--[if IE]>
<link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->
浏览器的CSS Hack 方法有很多, 比如@import 引入, > 过滤等等方法, 但以上就是我用过的全部.
网页前台的兼容不应该仅限于对过去的浏览器支持(向前兼容), 更应该对未来的浏览器服务(向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就永远不会过时(IE 系列除外). 所以我的宗旨是尽量做到标准, 不得已才Hack, 并尽量使用比较简单的方法去解决.
八、个人推荐写法
其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。
（一）、经济实惠型写法：注重单独的HACK。IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)
.sofish{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少*/
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and
(-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
（二）、准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）
HTML: 添加body class
<!--[if IE6]--><body class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
懒吧<!--[if !IE]--><body class="non-ie"><![endif]-->
.sofish{padding:10px;}
.non-ie .sofish{padding:12px;}
.ie9 .sofish{padding:9px;}
.ie8 .sofish{padding:8px;}
.ie7 .sofish{padding:7px;}
.ie6 .sofish{padding:6px;}
发布评论