使用“attr()”关于 IE 中的 CSS 伪元素
我在 H4 元素上使用伪元素 :after，并为它们提供 attr('class') 作为 content 属性：
<h4 class="category-label">This is a new event</h4>
with
h4:after
{
content: attr(class);
display: block;
padding: 1em;
background-color: #555;
}
将产生预期结果 - H4 元素带有适当的标签 with 类，而 H4 没有任何标签元素没有class属性大多数浏览器 Safari 5+。
然而在 IE9 中，没有 class 属性的 H4 元素仍然会创建块伪元素，导致出现没有文本的空白灰色框，这不是预期的行为。在下图中，只有第一个块包含带有 class 属性的 H4，其值为“panel;”第二和第三块中的其他 H4 元素没有任何 class 属性：
有没有办法确保 IE9 不会为缺少引用内容属性的父元素显示伪内容？没有内容的伪元素不应呈现...
I'm using the pseudo element :after on my H4 elements, and giving them an attr('class') for the content property:
<h4 class="category-label">This is a new event</h4>
with
h4:after
{
content: attr(class);
display: block;
padding: 1em;
background-color: #555;
}
will yield the expected results -- appropriate labels for H4 elements with classes, and no labels whatsoever for H4 elements without class attributes in most browsers Safari 5+.
However in IE9, H4 elements without the class attribute still create block pseudo elements, resulting in blank gray boxes without text, which is not the expected behavior. In the image below, only the first block contains an H4 with a class attribute, valued at "panel;" the other H4 elements in the 2nd and 3rd blocks do not have any class attributes:
Is there a way to ensure that IE9 does not display pseudo content for parent elements that lack referenced content attribute? Pseudo elements w/o content should not render...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
只需使用
，样式将仅应用于具有已定义类的元素
just use
so the style will be applied only to the elements with a defined class
我怀疑你可以在不使用 javascript 设置其显示的情况下“确保”它。可能发生的情况是浏览器差异，浏览器按照您的预期运行，忽略
:after，而 IE9 将内容视为空，如content: ''I doubt you can "ensure" it without using javascript to set its display. What is probably happening is a browser difference where the browsers acting as you expect are ignoring the
:afterand IE9 is treating the content as empty likecontent: ''