html - nth-of-type(x)(带有媒体查询)在 Safari 9.1.1 中无法正常工作

Question

我的以下代码在 Chrome 中运行良好，但在 Safari 中运行不正常。

HTML

<p id="info">first line
<span> &emsp;|&emsp;</span> 
<span><br></span>
second line
</p>

CSS

@media (min-width: 800px) {
#info span { display:  inline; }
#info span:nth-of-type(2) {display: none; }
}

@media (max-width: 800px) {
#info span { display:  none; }
#info span:nth-of-type(2) {display: table-column;}
}

我最初用 nth-child(x) 对此进行了编码，但我读到 Safari 不支持它。我用 nth-of-type(x) 替换了它，但它仍然无法正常工作。

如果您从“小”列宽度开始，然后将其缩小，它就可以工作。如果您再次缩小它，这就是 Safari 失败的地方。

在 Safari 下检查页面，我可以看到 CSS 属性 display: none; 已应用，但似乎还有剩余的
遗留或其他东西....

这是一个 jsfiddle，在 Chrome 上工作，但在 Safari 上不工作:https://jsfiddle.net/auhbrmzg/2/

只需“摆弄”结果列宽即可查看实际效果。

预先感谢您的输入。

干杯。

Answer 1

选择器正在工作。如果您检查 Safari 内部的元素，您会发现它正在添加样式“display:none”。问题是“display:none”对 break 标签没有影响。本质上，即使样式设置为“display:none;”，标签仍然存在。

这里有一个替代方案:

HTML:

<p id="info">
  <span>first line</span>
  <span> &emsp;|&emsp;</span> 
  <span>second line</span>
</p>

CSS:

@media (min-width: 800px) {
    #info span { display:  inline; }
}

@media (max-width: 800px) {
    #info span {display:block;}
    #info span:nth-child(2) { display:  none; }
}

fiddle : https://jsfiddle.net/fyqx97zo/9/