小编Dan*_*ais的帖子

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

我有以下代码在Chrome中完美运行但在Safari中无法运行.

HTML

<p id="info">first line
<span> &emsp;|&emsp;</span> 
<span><br></span>
second line
</p>
Run Code Online (Sandbox Code Playgroud)

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

只需"缩小"结果列宽度即可查看它的实际效果.

提前感谢您的意见.

干杯.

html css safari

5
推荐指数
1
解决办法
127
查看次数

标签 统计

css ×1

html ×1

safari ×1