CSS display:内容在 Safari 中不起作用

Question

我发现display:content在Safari中不起作用。 Safari的替代方案是什么？ 我在这里找到了解决方案。 但答案是被否决了。

Answer 1

我想您正在尝试错误地使用:content，或者正在尝试在不支持它们的元素上使用伪

。

关于"显示：内容"声明：

这没有得到很好的支持。 请注意，如 https://caniuse.com/#feat=css-display-contents 中所述：

iOS Safari 10 和 11 以及 Safari 11 将显示：内容呈现为显示：内联。

另请注意，根据 https://drafts.csswg.org/css-display/#box-generation：

注： 由于仅框树受到影响，因此基于文档树的任何语义(如选择器匹配、事件处理和属性继承(都不会受到影响。然而，在撰写本文时，这在主要浏览器中尚未正确实现，因此在 Web 上使用此功能必须小心，因为它可能会阻止辅助功能工具访问元素的语义。

---

关于"内容："属性：

这得到了很好的支持，但只能应用于::before和::after伪元素。某些元素(如输入(不支持伪元素。有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/content。

<小时 />

演示：

这是一个非常基本的工作示例(在Chrome和Safari 13中测试过(，其中包含content:属性和contents显示值。

#somediv:before {
content: "(prepended) ";
color: red;
}
#somediv:after {
content: " (appended)";
color: blue;
}
#someotherdiv {/* pointless styles */
display:contents;
border:2px solid red;
background:yellow;
}
#someotherdiv p {
color:purple;
}

<div id="somediv">
Example of content on pseudos.
</div>
<div id="someotherdiv">
<p>Example of display:contents. Note that parent container isn't rendered?</p>
</div>