《
CSS Hack和向后兼容的常见问题》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331F2013.htm
--> [
网站建设之]CSS 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;}
/* 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 */
优点：保险；向后兼容好；易保护 缺点：用不好会增添HTTP恳求；用得好代码又多 四、浏览器探测：JS/后端程序断定// 以jQuery为例，检测是否是IE6，是则加上class="ie6"
if($.browser.msie && $.browser.version =6){
$('div').addClass('ie6');
}
这种写法的优缺点是：
先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附具体的Hack办法列表）：
优点：全面；易维护；可读性高 缺点：占资源；代码量大（要重写选择器）
上面4种是我们最常用的方式。当初，让咱们抽出心里存着的那3个准则，看看如何抉择。要时光思考一下么？这里简略地说一下我的取舍：
这种写法的优毛病是：
你要是不斟酌页面加载速度，不考虑服务器蒙受才能的话，那在向后兼容和淘汰的处置上能够做得很完美（从代码上），但这从某种水平上，不如不做。
衡量成本：在浏览器被淘汰后，如何疾速清理掉无用代码 可维护：在资源成本和完美间均衡的向后兼容 可读：省力、易记
最后，还是那句，盼望看到你更好的方法！
至于应用JS或者后端程序来判定，除非你有足够的资源，除非你解决不了（90%不会产生），不然，并不推荐用。附上一个表（via），可以参考参考：
经济实惠型写法：重视单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他阅读器HACK少，选择块状的挑选器HACK(推荐)
人一旦习惯了某些货色就很难去改，以及各种各样的起因，新的浏览器越来越多，而老的总淘汰不了。增加老是快于灭亡导致了浏览器兼容是成了谈不完的话题。说 到浏览器兼容，CSS HACK天然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做雷同的事，须要我们有统一的规范来进行Coding，以 方便维护。而解决兼容的方法就是（必需是，由于这才最轻易有问题的）其中一个最重要的、要解决的规范之一。
这里把成本放在了第一位，并不是说我们不乐意寻求完美，而只是，太刻意追求完美有时候可能会妨碍我们前进；在成本后，应该是可维护和可读，这点对团队的配合来说至关重要，而终极成果也是为了减少成本。
Tag：CSS hack 兼容 常见问题 CSS hack 兼容 常见问题
尽可能省资源
五、个人推举写法
而后，从第二种方法我们也可以发明。把IE注释用在body class上，而不是增添单独的<link />或者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP要求一个都不能挥霍。
在解决兼容方法上，想定出一个同一的标准，个人以为应当以下面3点为基础原则：
优点：全面，各种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 */
}
向后兼容的目的：1年
你想现在的网站兼容IE10么，谁不想，但这可预感性太低了，也可以说，本钱太高了。临时没必要。不过，IE9可能要宣布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，假如IE10出来，一旦支撑这个hack，而又不这个bug，可能删掉只影响2个浏览器，也会更便利；
实在可以纠结的还真多，这里联合A-Grade浏览器的品种和HACK的种类，写两种个人认为比较公道的HACK和向后兼容相统筹的写法，仅供大家参考的。
长处：易记；代码少 缺陷：不全面 三、IE 注解<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->
六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1)#siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and(-webkit-min-device-pixel-ratio:0){
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and(max-device-width:480px){
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""]#catorce { color: red }
/* Everything but IE6-8 */
:root *>#quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
其余的就未几说了。不外，仍是要提示一下: 解释也是很主要的。固然是HACK了，但事实中情况有时候比设想中的庞杂得多，给代码一个正文，好过千言万语。
一、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;}}
这样维护起来成本比较低，修改不会影响其他的浏览器，而一旦有浏览器淘汰，只有搜寻要害字，就可以批量去掉这些代码。比方，ie6的单独hack：_padding:6px;；
准完善主义写法：配合IE注释，一律采取选择器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 */
尽量应用单独HACK
这种写法的优缺点是：
这种写法的优缺点是：
相关的主题文章：
(责任编辑：网站建设)
CSS Hack和向后兼容的常见问题相关文章