如何解决仅当内容不为空时才会显示Safari 13+框阴影
当Box-shadow
属性为空(“”)并在Safari中查看时,content
属性没有显示。我可以使用Safari 13.1.3复制它,并获得iOS 14用户的报告。
这是CSS(它是Foundation 5响应式汉堡菜单图标)。
.top-bar .toggle-topbar.menu-icon a span:after {
content: "";
display: block;
height: 0;
position: absolute;
margin-top: -8px;
top: 50%;
right: 21.666px;
right: 1.3541666667rem;
Box-shadow: 0 0 0 1px #fff,0 7px 0 1px #fff,0 14px 0 1px #fff;
width: 16px;
}
一旦我在content
属性中输入内容,就会显示框阴影。因此,我当然可以在内容中添加一个点,并用color: transparent
使其消失。
真的有解决方案吗?它可以在当前的Chrome和Firefox中使用。
解决方法
这里有一个对我有用的修复。
对于我们使用 Foundation 5 的某些项目,该错误似乎在 MacOS (~10.15) 和 iOS (~14.3) 上的 Chrome/Safari 中表现出来。
增加一些高度似乎对我们的项目有用
.tab-bar .menu-icon span {
height: 2px;
box-shadow: 0 10px 0 0px #fff,0 16px 0 0px #fff,0 22px 0 0px #fff;
}
您可以在此 Codepen 中查看比较。蓝行是标准基础,红行是修复。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。