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; }
}

小提琴： https://jsfiddle.net/fyqx97zo/9/

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

HTML

CSS

1 个答案: