:after 元素的内容不采用背景：继承；在 IE8 中答案

【问题标题】：:after element's content not taking background:inherit; in IE8:after 元素的内容不采用背景：继承；在 IE8 中
【发布时间】：2013-12-05 12:31:40
【问题描述】：

我在 html 中有一个链接，我正在使用 :after 伪元素插入一些内容并设置该内容的样式。它在 FF 和 IE9 中运行良好。但不能在 IE8 中工作。

当我点击“点击”链接时，容器 div 的背景颜色会发生变化。但是 :after 插入的内容在 IE8 中不会将该颜色作为背景。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">     </script>
<script type="text/javascript">
$(function(){
  $(".clickMe").click(function(){
  $(".yellow").addClass("red").removeClass("yellow");
});
});

</script>

<style>
 .testLink {
   display: block;
   width: 109px;
   background: inherit;
   max-height: 32px;
   overflow: hidden;
}

.testLink:after {
  content: "...";
  background: inherit;
  position: relative;
  width: 45px;
  margin-left: -20px;
  padding: 0 5px;
  background-image:none;
  background-color:inherit;
  font-size: 14px;
 }
.yellow{ background:yellow;}
.red{ background:red ;}

</style>
</head>
<body>
  <div class="yellow">
     <a href="#" class="testLink">linkTextHere</a>
  </div>
  <a href="#" class="clickMe">click</a>
</body>
</html>

任何专家的建议都将不胜感激。提前谢谢..

【问题讨论】：

标签： html css internet-explorer-8

【解决方案1】：

看看IE8对继承的浏览器支持

http://www.w3schools.com/cssref/pr_background-color.asp

注意：IE7 及更早版本不支持值“inherit”。 IE8 需要一个！DOCTYPE。 IE9 支持“继承”。

所以考虑到 Doctype，他们似乎对它有一个普遍的问题。也许尝试使用与 html5 不同的方法来确定？

【讨论】：

我认为 ie8 考虑继承，但在改变父母背景后，它并没有在 ie8 中动态地采用它。
我通过放置 HTML4 doctype 进行了检查，但没有运气。