Question

怎么写针对IE9的CSS

导航栏的字体是加粗的、在IE9中显示的字间距比在其他浏览器中的都要窄。据说IE9渲染中文粗体文字时没有1像素字间距？怎么单独写样式给IE9来解决这个问题呢

Answer 1

针对IE9的CSS只需在相应CSS代码加入只有IE9识别的 \9\0。具体代码如下：
.div{ background-color:#0f0\9\0;/* ie9 */ }
其他浏览器写法：
background-color:#f00;/*all*/
background-color:#0ff\0;/* ie 8/9 */
background-color:#0f0\9\0;/* ie9 */
*background-color:#00f;/*ie7*/
_background-color:#ff0;/*ie6*/
background-color//:#090;/*非IE*/
background-color:#900\9;/*所有ie*/
}

Answer 2

.test{ /* 1. */

/* color:#09F\0; 以前是IE8/9, 现在10也支持 */

color:#09F\0/; /* 以前是IE8 only, 现在IE9/10也支持. 如要排除IE9需要使用下面的rule重设IE9样式 */

}

@media all and (min-width:0) { /* 2. */

.test{color:red\9; }/* IE9 only, 现在IE10也支持 */

/* Ps:老外的方法都是\0，根本没考虑Opera */

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */

.test { color: green; } /* IE10+ */

}

:root .test { color:#963\9; } /* 以前IE9 only, 现在10也支持, 优先级高于@media, 优先级太高, 尽量少用 */

Answer 3

有很多，有属性hack，选择器hack，还有IE条件注释：
background-color:blue \9\0;

.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

<!--[if IE 9]>
<h2>版本 9</h2>
<![endif]-->

追问

谢谢！QAQ 刚刚试了下\9\0在IE8里好像也会有效……，不过这个好好用！实在是太感谢了！

追答

:root #foo{
color:#eee\9;
}
这样也可以

Answer 4

background-color:blue\9\0; 仅IE9支持；

Answer 5

background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
*background-color:green; /* ie 7*/
_background-color:gray; /* ie 6*/