在css中,有一个专有名词叫做CSS Hack。它的作用是是兼容各种浏览器,然而IE浏览器总是个令人头疼的存在,因为很多兼容性问题都源于它。尽管如此,但在目前而言,IE浏览器仍然主流浏览器之一,使用人数众多。所以web程序员们还是需要绞尽脑汁去处理其兼容问题。今天我们课课家将向大家介绍一个仅针对IE8有效的CSS Hack猎奇写法。
最近我们课课家工作人员在做项目的时候,引用了Google Font的在线字体,估计是因为浏览器对字体的渲染方式不同或者是字体格式不一样,结果导致IE8中导航是错位的,而IE9和IE10中是正常的。
要想IE8也实现兼容,是时候让IE8的Css Hack上场了。什么?你不知道IE8的CSS Hack。在网上搜索一下嘛!通过搜索,你不难发现,IE8的CSS Hack就是在属性后面加上\9或者\0,代码如下:
color:#FFF\0; /* IE8 */
color:#FFF\9; /* 所有IE浏览器(ie6+) */
加上之后,发现IE8确实是没有问题了,问题好像解决了喔!但是事情的发展好像没有我们想象中那么顺利。这时IE9和IE10反而出现问题了,因为上面的Hack同样对IE9和IE10起作用了。
好吧,实践证明这个CSS Hack不是IE8专有的。那怎么做才能只针对IE8做Hack呢?我们需要转变一下思路:可以先应用IE8的Hack,与非IE浏览器分开,然后再应用一些CSS3之类的IE8不支持的选择器来重新覆盖一遍,让支持新选择器的IE9、IE10正常显示。符合条件的常用选择器有:root,于是就可以写出下面代码:
.section-nav li a {
display: block;
padding: 10px 13px;
padding: 10px 7px 10px 7px \9;
border-right: 1px solid #d7d7d7;
}
:root .section-nav li a {
padding: 10px 13px 10px 13px;
}
这样就做到了只对IE8浏览器起作用的CSS Hack了,是不是很简单呀!学会了这个猎奇写法之后,如果大家在实际操作中遇到类似的情况就可以轻松解决了。这里我们介绍得比较简单,有不懂的地方,需要大家慢慢领会。最后,希望大家有所收获,感谢大家的支持!