我有以下代码在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; }
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。