Question

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

在当前的Blink（Chrome等）实施中，将content属性设置为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 s阴影的帮助下显示了损坏的div，因此在这种情况下可以对其应用伪元素（4）

当前的WebKit不支持img的伪元素。但是，有趣的是，至少iOS 9.2.1 Safari在为content（5）设置img属性后开始支持它们。

为什么这个属性会做出这样的改变？我想如果一个空元素获得任何内容（甚至生成），浏览器必须提供一些内容来显示这些内容，有效地用某种容器替换空元素（如Blink＆＃39; s shadow {{1} }），这个容器可以有伪。我错了吗？并没有从最新的WebKit版本中删除此行为吗？

Answer 1

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

你们似乎比我更了解这个话题。因此，可能您已经知道这些方法，但是无论如何，我都会写解决方案，以供那些像我一样会发现此主题的大三学生使用。

我需要一种用于损坏图像占位符的方法。我以为我可以检查文件并提供“ .brokenimg”类名称以在后端进行标记，并使用CSS“ content：”更改图像。但这没有用。（在Chrome，Firefox，Opera，Edge，三星的Android网络浏览器中进行了测试。都一样。）

然后，我尝试更改脚本并使用s代替s。并在CSS中进行了尝试；

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

几乎可以用，但是，但这确实很有限，这不是我所需要的。

因此，通过JavaScript事件解决了我的问题；

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

我知道这不一样。但就我而言，它确实满足了我的需求。

我想我们现在必须找到类似的方式。

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

1 个答案: