我有以下代码在Chrome中完美运行但在Safari中无法运行.
<p id="info">first line
<span>  | </span>
<span><br></span>
second line
</p>
Run Code Online (Sandbox Code Playgroud)
@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;}
}
Run Code Online (Sandbox Code Playgroud)
我最初使用nth-child(x)对此进行了编码,但我读到了Safari不支持这一点.我用nth-of-type(x)替换它但它仍然无法正常工作.
如果你从一个'小'列宽开始,然后使它位,它就可以工作.如果再次缩小它,那就是Safari失败的地方.
检查Safari下的页面我可以看到CSS属性display:none; 应用但似乎
留下了剩余的东西或者......
这是一个jsfiddle与它,在Chrome上工作但不在Safari上:https://jsfiddle.net/auhbrmzg/2/
只需"缩小"结果列宽度即可查看它的实际效果.
提前感谢您的意见.
干杯.