我有以下代码在Chrome中完美运行但在Safari中无法运行.
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/上没有
只需“缩小”结果列宽度即可查看它的实际效果.
提前感谢您的意见.
干杯.
最佳答案
选择器正在工作.如果您检查Safari内部的元素,您会发现它正在添加样式“display：none”.问题是“display：none”对break标记没有影响.基本上,即使样式设置为“display：none;”,标签仍然存在.
这是你所拥有的替代品：
HTML：
CSS：
@media (min-width: 800px) {
#info span { display: inline; }
}
@media (max-width: 800px) {
#info span {display:block;}
#info span:nth-child(2) { display: none; }
}
