针对google Chrome的 CSS hacks

今天调试某页面样式，发现chrome下出现问题，但是同样基于webkit引擎的safari没有问题，很是郁闷。于是寻找针对google chrome 的hacks解决方案，网上先搜索了一把，得到的答案基本是一样的，如这篇文章http://www.zeroz.cn/blog/archives/162/，但是自从firefox3.5发布后这个hack就不太灵验了，因为FF 3.5也开始识别nth-of-type了。

于是继续苦找，发现了一个针对webkit的hacks：

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */
}

这样的hacks同样是被Google Chrome、Safari 3.0、Opera 9 所识别的，这还是不能根本解决我的问题。但是仔细查看这篇文章，发现了“另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。”这句话，于是算是变通的找到了一个解决办法。我的代码是要将chrome的字体设置为宋体，其它浏览器仍然使用默认设置的字体。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .parent-cat li{font-family:'宋体'}
  .parent-cat li{font-family:inhert;#}
}

在设置完针对google chrome的样式后，再通过css inhert + # hacks即可达到我们的目标。