仅对于IE8合理的CSS Hack好奇写法

2021-03-18 05:52 jianzhan

近期做新项目的情况下,引入了 Google Font 的线上字体样式,估算是由于访问器对字体样式的3D渲染方法不一样或是字体样式文件格式不1样,結果致使 IE8 中导航栏是移位的,而 IE9 和 IE10 中是一切正常的。

那末就必须独立为 IE8 开展1些调剂,因而就必须 IE8 的 CSS hack。1看到这里,充足非常容易了吧?在网上流传已久的 IE8 CSS hack 便是在特性后边再加 \9 或 \0,编码以下:

CSS Code拷贝內容到剪贴板
  1. color:#FFF\0;                    /* IE8 */  
  2. color:#FFF\9;                    /* 全部IE访问器(ie6+) */  

再加以后,发现 IE8 的确是沒有难题了,可是 IE9 和 IE10 却出現了难题,上面的 hack 一样对 IE9 和 IE10 起功效。

好吧,这个 CSS hack 并不是 IE8 独有的。那如何做才可以只对于 IE8 做 hack 呢?

这里的思路必须稍稍变换1下:能够先运用 IE8 的 hack ,与非 IE 访问器分开,随后再运用1些 CSS3 之类的 IE8 不适用的挑选器来再次遮盖1遍,让适用新挑选器的 IE9、IE10 一切正常显示信息。合乎标准的常见挑选器有 :root,因而便可以写出下面编码:

CSS Code拷贝內容到剪贴板
  1. .section-nav li a {   
  2.   displayblock;   
  3.   padding10px 13px;   
  4.   padding10px 7px  10px 7px \9;   
  5.   border-right1px solid #d7d7d7;   
  6. }   
  7. :root .section-nav li a {   
  8.   padding10px 13px 10px 13px;   
  9. }  

这样就保证了只对 IE8 访问器起功效的 CSS hack,这类方式后来检索了1下,早就有人提到了,写本文关键是详细介绍1下这个处理访问器适配性难题的思路吧。

再度感慨,微软奇异的IE,在开发设计中迫不得已令人抓狂。为IE6、IE7这些,全是较为好hack的,唯有IE8较为坑1点。