：伪 CSS 规则在 IE 中不起作用答案

【问题标题】：:pseudo CSS rule not working in IE：伪 CSS 规则在 IE 中不起作用
【发布时间】：2014-09-25 17:23:19
【问题描述】：

我有一个 CSS 规则，它适用于除 IE 之外的所有浏览器。当我在 IE 检查器中检查它时，我可以看到该规则没有被应用。

.wrapper:after {
  content: '';
  display: table;
  clear: both;
}

知道为什么这个规则没有在 IE 中应用吗？

我正在 IE 11、10 和 9 上进行测试。我正在开发一个 Magento 应用程序。

【问题讨论】：

它在其他浏览器中工作吗？你的伪元素没有内容。
预期的结果是什么？你的 :after 没有内容，那么其他浏览器会显示什么？似乎您没有在问题中包含一些实际代码。
@Rob：空字符串实际上被视为内容。 “无内容”将是 content: none。虽然一些较旧的浏览器在区分 none 和空字符串时确实存在问题，但 IE 并不是这些浏览器之一。见stackoverflow.com/questions/13656098/…
@rob，是的，它适用于 chrome、safari 和 firefox
@BoltClock 我不确定这是否相同。规范说'none'不会生成元素，而其他任何东西都会生成元素，但该元素将包含一个字符串，在这种情况下，没有换行符和空内容，因此，没有内联框？不知道。

【解决方案1】：

我能够通过将 css 规则重写为：

.wrapper:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

我不明白为什么之前的规则在 IE 上不起作用，而在所有其他浏览器中都起作用。之前的规则是从 Magento RWD 主题继承而来的。

此外，IE 检查器似乎删除了所有 :after 规则，这是一种误导，因为其中一些规则实际上是在页面上工作的。

【讨论】：