仅针对IE8有效的CSS Hack猎奇写法

近期，我在项目中引入了 Google Font 的在线字体。由于浏览器对字体的渲染方式存在差异，以及不同浏览器对于字体格式的支持不尽相同，导致了在 IE8 浏览器中导航出现了错位的问题。反观 IE9 和 IE10，却能够正常显示。

为了解决这个问题，我们不得不针对 IE8 进行一些特殊的调整。这时，IE8 的 CSS hack 就显得尤为关键。通常，这种 hack 的实现方式是在 CSS 属性后面添加 \9 或 \0。比如：

```css

color:FFF\0; / 针对 IE8 /

color:FFF\9; / 针对所有 IE 浏览器(包括 IE6+) /

```

在实际应用中，我发现虽然 IE8 的问题得到了解决，但同时也影响了 IE9 和 IE10 的正常显示。显然，这种通用的 hack 方法并非专对 IE8 有效。

为了寻找解决方案，我转换了思路。我们可以先应用专门针对 IE8 的 hack，同时针对非 IE 浏览器做特别处理。接着，利用 IE8 不支持的 CSS3 选择器来重新覆盖之前的样式，使得支持新选择器的 IE9 和 IE10 能够正常显示。其中，:root 是一个符合条件的常用选择器。于是，我写出了如下的 CSS 代码：

```css

.section-nav li a {

display: block;

padding: 10px 7px;

padding: 10px 7px 10px 7px \9;

border-right: 1px solid d7d7d7;

}

:root .section-nav li a {

padding: 10px 13px 10px 13px;

}

```

以上代码实现了只对 IE8 起作用的 CSS hack。这种思路和方法其实早已有人提出，我写这篇文章的主要目的是分享和解决浏览器兼容性问题的思路。再次感叹微软的 IE 浏览器，开发过程中真是让人时而欢喜时而忧。尤其是 IE8，与其他版本相比，确实存在更多挑战。