CSS hack用法详解

admin管理员组

文章数量:1794759

CSS hack用法详解

CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。 原理：使用CSS属性优先级解决兼容性问题。 友情提示：尽量找到通用方法而减少对CSS hack的使用，大规模使用CSS hack会带来维护成本的提高以及浏览器版本变化而带来类似hack失效等系列问题。

一、属性级hack

在样式属性名或者属性值的前后加前缀或者后缀来识别不同的浏览器

/* IE5 6 7 */ +color: #f00; /* IE6 */ -color: #f00; /* IE 8 9 10+ */ background-color: #000\\0; /* IE 9 10 */ background-color: #f0f\\9\\0; /* IE 6 7 */ +background-color: #abcdef; /* IE6 */ -background-color: #ff0;

想要兼容IE6 7 8 9的时候，一定是高版本的兼容写法在前，低版本的在后

二、选择符级hack /* IE6和更早版本 */ * box.test { color: #090; } /* IE7 */ * + box .test { color: #ff0; } 三、条件hack

HTML头部引入hack，使用HTML条件注释判断浏览器版本 使用时注意避免不必要的空格

<!--[if IE]> <p>只在IE浏览器中执行的内容</p> <![endif]--> <!--[if IE 7]> <p>只在IE7中执行的内容</p> <![endif]--> <!--[if gt IE 8]> <p>只在大于IE8的版本上才显示</p> <![endif]-->

条件： 大于： 选择大于指定版本的IE版本。关键字：gt（greater than） 大于或等于： 选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal） 小于： 选择小于指定版本的IE版本。关键字：lt（less than） 小于或等于： 选择小于或等于指定版本的IE版本。关键字：lte（less than or equal） 非指定版本： 选择除指定版本外的所有IE版本。关键字：!

本文标签： 详解csshack