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) 手动将一个类添加到最后一个 <li>
或 b) 因为这是一个菜单,并且这些可能在其中有链接,使用属性选择器定位最后一个链接,这在 IE8 中确实有效。类似的东西
.footermenu a[href="contact.html"] ...
【讨论】:
【参考方案6】:尝试使用类似的东西:
.footerMenu li background-color: expression(this.previousSibling==null?'red':'green');
【讨论】:
【参考方案7】:我知道它很旧,但是...有一个简单的方法可以做到:
就在你想要改变的 li 中这样做:
<li style="yourstyle;">
...</li>
【讨论】:
以上是关于li:last-child 似乎在 IE8 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Twitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用