0

我有一个名为 switch 控件的 div 类，它有一个名为 thumb 的 div 类作为孩子

<div class="switch-control">
         <div class="thumb"></div>
</div>

并且有他们的css称为：

.switch-control > .thumb
.switch-control > .thumb::before

这两个 css 类都在 chrome 和 firefox 上生效并使用，但在 IE8,9 上.switch-control > .thumb是活动的，并且.switch-control > .thumb::before被标记为未使用，因此我看不到它在 IE8,9 上生效

为什么会这样，我该如何解决？谢谢

4

1 回答 1

1

由于某些奇怪的原因，IE9 倾向于删除伪元素的样式，但它确实支持所有受支持的伪元素的 CSS3 双冒号表示法（这包括 CSS1::first-line和::first-letter，以及 CSS2::before和::after）。如果您的样式不起作用，则说明其他问题（有许多关于此效果的 SO 问题，但我不知道是什么导致了问题）。

IE8 不支持任何伪元素的 CSS3 双冒号表示法，只支持传统上一直使用的单冒号表示法。

如果您需要支持 IE8，则必须使用传统的单冒号表示法（出于兼容性原因，每个浏览器都应继续支持该表示法）：

.switch-control > .thumb:before

关于您的评论：

我已将我的 css 样式表从 .switch-control > .thumb::before 更新为 .switch-control > .thumb:before （从双冒号到单冒号），但所有浏览器（chrome 和 IE）仍然显示双冒号。怎么会？

正如我所提到的，伪元素现在应该以双冒号为前缀，并保持单冒号以保持兼容性。它只是从 CSS3 选择器开始并继续使用的新符号，因此当浏览器的开发人员工具遇到伪元素而不是伪类时，如果它理解 CSS3，它会用双冒号显示它。

换句话说，它只是用双冒号显示的浏览器 UI。它不会以任何方式更改样式表中的代码。

于 2012-06-20T17:22:48.303 回答