CSS 显示:内容在 Safari 中不起作用 [英] CSS display:content not working in Safari

问题描述

我发现 display:content 在 Safari 中不起作用.Safari 的替代品是什么?我在此处找到了解决方案.但答案被否决了.

解决方案

我想您是在尝试错误地使用 :content，或者正在尝试在不正确的元素上使用伪代码不支持他们.

关于`display:contents`声明:

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

<块引用>

iOS Safari 10 和 11 以及 Safari 11 将 display:contents 呈现为 display:inline.

另请注意，根据 https://drafts.c​​sswg.org/css-display/#box-generation:

<块引用>

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

---

关于 `content:` 属性:

这是很好的支持，但只能应用于 ::before 和 ::after 伪元素.某些元素(例如输入)将不支持伪元素.请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/content 了解更多信息.

---

演示:

这是 content: 属性和 contents 显示值的一个非常基本的工作示例(在 Chrome 和 Safari 13 中测试).

#somediv:before {内容:(前置)"；红色;}#somediv:在{之后内容:(附加)"；颜色:蓝色；}#someotherdiv {/* 无意义的样式 */显示:内容；边框:2px 纯红色；背景:黄色；}#someotherdiv p {颜色:紫色；}

伪内容的示例.
<div id="someotherdiv"><p>显示示例:内容.请注意，未呈现父容器?</p>

I've found that display:content doesn't work in Safari. What is the alternative of it for Safari? I found a solution here. But the answer was down voted.

解决方案

I imagine that you're trying to use :content incorrectly, or are trying to use a pseudo on an element that doesn't support them.

Regarding `display:contents` declaration:

This is not well supported. Note that as documented in https://caniuse.com/#feat=css-display-contents:

iOS Safari 10 and 11, and Safari 11 renders display:contents as display:inline.

Also note that according to https://drafts.csswg.org/css-display/#box-generation:

Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected. As of writing, however, this is not implemented correctly in major browsers, so using this feature on the Web must be done with care as it can prevent accessibility tools from accessing the element’s semantics.

---

Regarding the `content:` property:

This is well supported but can only be applied to ::before and ::after pseudo-elements. Some elements (such as inputs) will not support pseudo elements. See: https://developer.mozilla.org/en-US/docs/Web/CSS/content for more info.

---

Demo:

Here's a very basic working example (tested in Chrome and Safari 13) of both the content: property and the contents display value.

#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>

这篇关于CSS 显示:内容在 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！