li:last-child 似乎在 IE8 中不起作用

Posted

技术标签:

【中文标题】li:last-child 似乎在 IE8 中不起作用【英文标题】:li:last-child doesn't seem to work in IE8 【发布时间】:2012-06-03 18:09:08 【问题描述】:

下面是我的html结构

<div class="footerMenu">
   <ul>
     <li>Home</li>
     <li>About</li>
     <li>Feedback</li>
     <li>Contact us</li>        
   </ul>            
</div>

但是

.footerMenu li:last-child   

选择器似乎在 IE8 中不起作用。但是http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx 表示支持伪选择器。对此有任何帮助!

【问题讨论】:

我 99% 确定它不受支持 你有没有试过 .footerMenu li: 一些激烈的东西; 看看这是否有效? 不,实际上没有。它在那里说它在 IE9 及更高版本中受支持。 ***.com/questions/1293369/using-last-child-in-css 是的,只有 .footerMenu li 有效 【参考方案1】:

你读错了。它说它在 IE8 中支持:

如果您正在查看:first-child,它确实支持 IE7 和 IE8,并认为这同样适用于 :last-child... 惊喜!没有。

:first-child 是 CSS2 选择器,但 :last-child 仅在 CSS3 中引入,因此由于 Microsoft 的目标只是 CSS2.1 与 IE8 兼容,因此他们可能直到 IE8 之后才关心 :last-child

如果您知道您将只有四个 li 元素,那么您应该能够使用相邻的兄弟选择器来到达第四个 li

.footerMenu li:first-child + li + li + li

【讨论】:

是的,我认为既然第一个在那里,甚至最后一个也会受到支持。感谢您的信息。 顺便说一下,表格 出错的是 IE9 对 CSS3 对 CSS1/2 伪元素的双冒号表示法的支持(虽然奇怪的是,它对 CSS3 伪元素来说是正确的-元素):***.com/questions/7157405/…【参考方案2】:

要建立在其他人的答案之上,另一种方法是使用 javascript 来填补空白,selectivizr 是添加最后一个孩子支持的一个很好的例子。

http://selectivizr.com/

【讨论】:

【参考方案3】:

您提供的链接显示它不支持 IE8... 仅 IE9+。谷歌搜索 last-child IE8 会出现大量类似的查询。

【讨论】:

【参考方案4】:

你在哪里读到的? :first-child 支持回 IE7,但 :last-child 是 IE9 及更高版本。

(为方便起见,标题向下移动)

【讨论】:

对不起我的错误..我忽略了它!【参考方案5】:

IE8 不支持 last-child 的其他答案是正确的。但是,为了解决您的特定问题,您可以 a) 手动将一个类添加到最后一个 &lt;li&gt; 或 b) 因为这是一个菜单,并且这些可能在其中有链接,使用属性选择器定位最后一个链接,这在 IE8 中确实有效。类似的东西

.footermenu a[href="contact.html"]  ... 

【讨论】:

【参考方案6】:

尝试使用类似的东西:

.footerMenu li background-color: expression(this.previousSibling==null?'red':'green');

【讨论】:

【参考方案7】:

我知道它很旧,但是...有一个简单的方法可以做到:

就在你想要改变的 li 中这样做:

&lt;li style="yourstyle;"&gt;...&lt;/li&gt;

【讨论】:

以上是关于li:last-child 似乎在 IE8 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

不透明度在 IE8 中不起作用

overflow-x在IE8中不起作用

Twitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用

为啥 Bootstrap 3 导航栏下拉菜单在 IE8 中不起作用?

jquery验证在IE8中不起作用

jQuery Toggle 在 IE8 中不起作用