在WebKit中,’““““““““““““““““““““““““““““““`

很久以前,有一个 CSS3生成内容规范的草案,允许内容属性 for any HTML element(不仅仅是:: before / ::之后的伪元素),对空或替换的元素没有任何正式的限制. Opera Presto曾经支持( 1,2),至少在一定程度上由WebKit( 3)支持.到2011年底,WebKit对img元素的内容的实现似乎有效地将其从空的替换元素转换为非替换元素,如span(甚至其上下文菜单已更改,删除诸如“将图像另存为…”等选项).它也使得可以应用像img :: before之类的伪元素.

在目前的Blink(Chrome等)实现中,将内容属性转换为img元素没有明显的效果.但是,img元素显然具有不同的结构,这取决于它是否正确加载或被破坏：如果加载,它将由DOM Inspector显示为一个简单的空元素,但如果被破坏,则会暴露内部的Shadow DOM结构,如下所示：

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; Box-sizing: border-Box; padding: 1px;">
  <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;">
  <div id="alttext" style="overflow: hidden; display: block;">Alt text</div>
</div>

可能是因为破坏的img在阴影divs的帮助下显示,所以在这种情况下可以应用伪元素(4).

当前WebKit不支持img的伪元素.但是,有趣的是,至少iOS 9.2.1 Safari在为img(5)设置content属性后才开始支持.

为什么这个财产有这样的变化？我猜,如果一个空元素获得任何内容(甚至生成),浏览器必须提供一些东西来显示这个内容,有效地用某种容器替换空元素(如Blink的shadow div id =“alttext-container” ),并且该容器可以具有伪.我错了吗？这个行为是不是从最新的WebKit版本中删除？

解决方法

The content property as defined in CSS 2.1适用于：之前和之后只有伪元素.通过CSS规则,您可以为任何元素指定任何属性,但规范对于“适用于”(即影响)各种元素的属性有限制.

CSS3 Generated and Replaced Content Module工作草案将内容属性描述为适用于所有元素.它有一个用图像代替h1元素的内容的例子,对img元素肯定是一样的.

但这只是一个工作草案.关于CSS实现状态的通常资源,QuirksMode.org CSS信息和Caniuse.com,不表示情况;他们只描述对以下内容的支持：before和：之后(除了IE 7及更早版本,这是相当普遍的.

原文地址：https://www.jb51.cc/css/216775.html