今天小编跟大家讲解下有关说说CSS Hack 和向后兼容(推荐) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关说说CSS Hack 和向后兼容(推荐) 的相关资料，希望小伙伴们看了有所帮助。
增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容 CSS HACK自然而然地被我们想起。今天 我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事 需要我们有统一的规范来进行Coding 以方便维护。而解决兼容的方法就是（必须是 因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。 在解决兼容方法上 想定出一个统一的规范 个人认为应该以下面3点为基本原则： 权衡成本：在浏览器被淘汰后 如何快速清理掉无用代码 可维护：在资源成本和完美间平衡的向后兼容 可读：省力、易记 这里把成本放在了第一位 并不是说我们不愿意追求完美 而只是 太刻意追求完美有时候可能会阻碍我们前进；在成本后 应该是可维护和可读 这点对于团队的合作来说至关重要 而最终结果也是为了减少成本。 先把这三个原则存起来 来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）： 一、CSS 选择器 Hack 复制代码代码如下: @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; padding:8px\0; *padding:5px; +padding:7px; _padding:6px; } 这种写法的优缺点是： 优点：易记；代码少 缺点：不全面 三、IE 注释 复制代码代码如下: <!--[if IE]>IE only<![endif]--> <!--[if !IE]>NOT IE<![endif]--> 这种写法的优缺点是： 优点：安全；向后兼容好；易维护 缺点：用不好会增加HTTP请求；用得好代码又多 四、浏览器探测：JS/后端程序判断 复制代码代码如下: // 以jQuery为例 检测是否是IE6 是则加上class="ie6"if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6'); } 这种写法的优缺点是： 优点：全面；易维护；可读性高 缺点：占资源；代码量大（要重写选择器） 上面4种是我们最常用的方法。现在 让我们抽出心里存着的那3个原则 看看如何选择。要时间思考一下么 这里简单地说一下我的选择： 尽量使用单独HACK 这样维护起来成本比较低 改动不会影响其他的浏览器 而一旦有浏览器淘汰 只要搜索关键字 就可以批量去掉这些代码。比如 ie6的单独hack：_padding:6px;； 向后兼容的目标：1年 你想现在的网站兼容IE10么 谁不想 但这可预见性太低了 也可以说 成本太高了。暂时没必要。不过 IE9可能要发布了 所以 选择像padding:8px\0;这样的IE8+的hack 在删掉其他代码不影响向后兼容上 会更好；并且 如果IE10出来 一旦支持这个hack 而又没有这个bug 可能删掉只影响2个浏览器 也会更方便； 尽可能省资源 你要是不考虑页面加载速度 不考虑服务器承受能力的话 那在向后兼容和淘汰的处理上可以做得很完美（从代码上） 但这从某种程度上 不如不做。 五、个人推荐写法 其实可以纠结的还真多 这里结合A-Grade浏览器的种类和HACK的种类 写两种个人认为比较合理的HACK和向后兼容相兼顾的写法 仅供大家参考的。 经济实惠型写法：注重单独的HACK。 IE的HACK比较多 选择省力易记的属性HACK；其他浏览器HACK少 选择块状的选择器HACK(推荐) 复制代码代码如下: .sofish{ padding:10px; padding:9px\9; padding:8px\0; *padding:5px; +padding:7px; _padding:6px; } @media all and (min-width: 0px){ .sofish{padding:11px;} } @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } * html #uno { color: red } *:first-child+html #dos { color: red } html>body #tres { color: red } html>body #cuatro { color: red } html:first-child #cinco { color: red } html[xmlns*=""] body:last-child #seis { color: red } body:nth-of-type(1) #siete { color: red } body:first-of-type #ocho { color: red } @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } @media screen and (max-device-width: 480px) { #veintiseis { color: red } } html[xmlns*=""]:root #trece { color: red } *|html[xmlns*=""] #catorce { color: red } :root *> #quince { color: red } *+html #dieciocho { color: red } #veinticuatro, x:-moz-any-link { color: red } #veinticinco, x:-moz-any-link, x:default { color: red } #once { _color: blue } #doce { *color: blue; } #diecisiete { color: blue } #diecinueve { color: blue\9; } #veinte { color: blue\9; } #veintesiete { color: blue !ie; } 提示：您可以先修改部分代码再运行其他的就不多说了。不过 还是要提醒一下: 注释也是很重要的。虽然是HACK了 但现实中情况有时候比想象中的复杂得多 给代码一个注释 好过千言万语。 最后 还是那句 希望看到你更好的方法！来源：爱蒂网
