很久以前有一个CSS3生成内容规范的草案,它允许任何HTML元素的content属性(不仅是::之前的:: ::伪元素之后),对空元素或替换元素没有任何正式限制.有人曾经被Opera的Presto支持(1,2),并且至少在一定程度上,通过WebKit的(3).到2011年底,WebKit的for 元素实现似乎有效地将它从空替换元素转换为非替换元素(甚至更改了上下文菜单,删除了"将图像另存为..."等选项).它还可以应用伪元素.contentimgspanimg::before
在当前的Blink(Chrome等)实现中,seeting 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阴影divs 的帮助下显示了破碎,在这种情况下可以将伪元素应用于它(4).
当前的WebKit不支持伪元素img.但是,有趣的是,至少iOS 9.2.1 Safari在为该content属性设置属性后开始支持它们img(5).
为什么这个属性会做出这样的改变？我想如果一个空元素获得任何内容(甚至生成),浏览器必须提供一些东西来显示这个内容,有效地用某种容器(如Blink的阴影div …
IE9 + 声称支持chCSS单元。根据定义，此单位是“等于当前字体的“ 0”（零，U + 0030）字形的提前量”，或者换句话说，字形的字符框宽度为“ 0” ”。这种解释似乎适用于Firefox 10+和Chrome 27+：<div style="width: 10ch;"></div>并且<div>0000000000</div>具有完全相同的宽度，因为它们具有相同大小的相同字体。但是在IE9 +中，该ch单位的含义似乎有些不同。
这是演示此问题的小提琴：http : //jsfiddle.net/CNsPg/6/
此单元的IE行为的逻辑是什么？还是只是一个错误？是否有可能使IE ch像其他浏览器一样对待单元（可能带有某些IE特定的文本呈现“魔术”）？