hack,顾名思义黑客。不过我在这里说的当然不是这个意思啦~那么什么是css hack呢?
以下引自百度文库的定义
简单地讲,css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同,所以会造成一些误差就像JS一样,一个JS网页特效,在微软IE6、IE7、IE8浏览器有效果,但可能在火狐(Mozilla Firefox)谷歌浏览器无效,这样就叫做JS hack ,所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。
总的来说就是因为不同浏览器和版本对样式解析出现差异导致制作网页的时候明显不一样,严重的会整个页面错位哦!!
css hack 是通过在css样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,css hack就是让你记住这个标准),以达到应用不同的css样式的目的。
下面是兼容各大主流浏览器的css hack汇总(最全的):
.element{
color:#000; /*w3c标准*/
[;color:#f00;]; /*Webkit(chrome和safari)*/
color:#666\9; /*IE8*/
*color:#999; /*IE7*/
_color:#333; /*IE6*/
}
:root .element{color:#0f0\9;} /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}} /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/
建议:在实际开发中如果不是很清楚可以先写布局代码,写一个阶段再用浏览器测试工具(推荐IETEST)测试哥哥版本浏览器的布局效果,如有问题再针对问题单独调试解决