我在 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>
如有任何专家建议，我们将不胜感激。 提前致谢..
最佳答案
看一下浏览器对IE8的inherit支持
http://www.w3schools.com/cssref/pr_background-color.asp
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
因此，考虑到 Doctype，他们似乎对它有一个普遍的问题。也许尝试使用与 html5 不同的版本来确定一下？
关于html - :after element's content not taking background:inherit; in IE8，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20400126/