CSS`content`属性是如何为WebKit中的`img`元素工作的？

很久以前，有一个CSS3生成的内容规范草案，它允许

Content

属性（不仅仅是：：before/：：after伪元素），对空的或替换的元素没有任何形式上的限制。它曾经得到Opera Presto（，）的支持，并且至少在某种程度上得到WebKit（）的支持。到2011年底，WebKit为

img

元素实现了

content

，似乎有效地将其从一个空的替换元素转换为未替换元素，如

span

（甚至其上下文菜单也发生了变化，删除了“将图像另存为…”等选项）。它还可以应用伪元素，如

img:：before

在当前的Blink（Chrome等）实现中，查看

content

属性到

img

元素没有明显的效果。但是

img

元素显然具有不同的结构，这取决于它是否正确加载或是否已损坏：如果已加载，它将由DOM检查器显示为一个简单的空元素，但如果已损坏，它将暴露内部阴影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

在阴影

div

s的帮助下显示，所以只有在这种情况下才可能对其应用伪元素（）

当前WebKit不支持

img

的伪元素。但是，有趣的是，至少iOS 9.2.1 Safari在为该

img

（）设置

content

属性后开始支持它们

---

为什么这个物业会有这样的变化？我猜如果一个空元素得到任何内容（甚至是生成的），浏览器必须提供一些东西来显示该内容，用某种容器（比如Blink's shadow

div id=“alttext container”

）有效地替换空元素，并且该容器可以有伪文本。我错了吗？这种行为不是从最新的WebKit版本中删除的吗？

我最近注意到了这一点。我真的很沮丧。很高兴看到有人已经提到了

你们似乎比我更了解这个话题。所以，也许你已经知道这些方法了，但我还是会写我的解决方案，给像我这样的年轻人

我需要一种方法来处理损坏的图像占位符。 我想我可以检查文件并在后端给“.brokenimg”类名进行标记，然后用CSS“content:”更改图像。 但它不起作用。（在Chrome、Firefox、Opera、Edge和三星安卓网络浏览器中进行了测试。所有测试都是一样的。）

然后，我尝试更改脚本并使用s而不是s。并在CSS中尝试了这一点

.brokenimg::before { content: url(picture.jpg); }

这几乎奏效了，但这确实是有限的，这不是我所需要的

所以，用JavaScript事件解决了我的问题

<img onerror="this.src='broken.jpg'" src="image.jpg">

我知道这不是一回事。但就我而言，它正是我所需要的

---

我想我们现在必须找到这样的方法。

有趣的是。。safari也会显示after元素，即使图像没有损坏也不会显示。是的，在safari中，似乎是

内容

属性未加载/损坏状态改变了

img

元素的渲染模型。这与Blink的行为不同。顺便问一下，您是否在OS X Safari中测试过它？令人惊讶的是，在任何地方都找不到它的文档..css-content-3的新版本是在您第一次询问这个问题几个月后发布的，它声明1）替换的元素没有：：before和：：after pseudos，但2）通过设置元素的内容属性，实际上，您可以更改该元素是被替换还是未被替换。这意味着您可以通过将img的内容设置为单个图像值以外的值，从而允许img具有：：before和：：after伪值，从而将img转换为未替换的元素。但是如果你把它的内容设置为一个图像值，它就会被替换。在最新的版本中，该规范还建议了当图像被破坏时该怎么做，但它没有提到阴影树。是的，有人建议CSS拥有一个功能，就像破碎图像的onerror属性一样。很有趣的东西，但不知道这个提议是否会被采纳！