你可能不知道的IE8 CSS Hack猎奇写法

编程小独行侠

2024-04-23 23:27

短信预约 -IT技能 免费直播动态提醒

在css中，有一个专有名词叫做CSS Hack。它的作用是是兼容各种浏览器，然而IE浏览器总是个令人头疼的存在，因为很多兼容性问题都源于它。尽管如此，但在目前而言，IE浏览器仍然主流浏览器之一，使用人数众多。所以web程序员们还是需要绞尽脑汁去处理其兼容问题。今天我们编程学习网将向大家介绍一个仅针对IE8有效的CSS Hack猎奇写法。

你可能不知道的IE8 CSS Hack猎奇写法_CSS教程_CSS技巧_IE8兼容_编程学习网

　　最近我们编程学习网工作人员在做项目的时候，引用了Google Font的在线字体，估计是因为浏览器对字体的渲染方式不同或者是字体格式不一样，结果导致IE8中导航是错位的，而IE9和IE10中是正常的。

　　要想IE8也实现兼容,是时候让IE8的Css Hack上场了。什么？你不知道IE8的CSS Hack。在网上搜索一下嘛！通过搜索，你不难发现，IE8的CSS Hack就是在属性后面加上\9或者\0，代码如下：

　　color:#FFF\0;

　　color:#FFF\9;

　　加上之后，发现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了，是不是很简单呀！学会了这个猎奇写法之后，如果大家在实际操作中遇到类似的情况就可以轻松解决了。这里我们介绍得比较简单，有不懂的地方，需要大家慢慢领会。最后，希望大家有所收获，感谢大家的支持！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。