Question

我有以下代码：

ul.myList li{
     border-right: 1px dotted #000;
}

但是，在最后一个元素上，我需要删除该边框，因为我正在使用的设计指示最后一项不需要边框作为分隔符。

所以，我需要定位列表的最后一个孩子，因此在我的CSS中添加了

ul.myList li:last-child{
     border-right: none;
}

众所周知，在Firefox，Safari和Chrome中都可以正常使用。

问题在于我们在Internet Explore 6到8中查看页面。

Answer 1

所以，经过一番挖掘后，我找到了答案：

如果浏览器是IE＆lt; 8，请指定这样的样式表：

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->

在IE样式表中指定以下规则：

ul.myList li{
     border-right: expression(this.nextSibling==null?'none':'inherit');
}

nextSibling表达式查看后面是否有元素，是否继承了默认样式表中指定的规则，如果不存在则应用新规则。

可以找到更多信息here

Answer 2

IE8＆LT;不支持此伪选择器。检查MSDN article是否支持所有功能：）

你可以看看Enable pseudo selectors in IE的这个jQuery解决方案，或者只是把它保留在IE中。

Answer 3

由于版本9之前的Internet Explorer（仍处于开发阶段）根本不支持:last-child选择器，遗憾的是，我最好的解决方案是在列表的最后一个元素上设置类或ID并尝试选择它。

当然，如果在IE中留下右边框不会完全破坏布局，你可能会想要保留代码，如果你不介意IE搞砸了渲染一点。

Answer 4

您可以使用jQuery执行此操作。所以不要依赖CSS。使用jQuery选择器设置最后一个元素的属性。我知道你没有用它标记你的问题。

jQuery('ul.myList li:last-child').css("Key","value");