手机全宽背景

Question

我很难在移动设备上使用无序列表 ul 全宽背景。当我使用 Chrome 进行测试时，全宽背景显示没有任何问题（下图第一张），但是当我在手机上查看时，我看不到背景（下图第二张）。

网址是here

.tabs--primary {
    width: 100%;
    background: #E9E8E8;
    border: none;
    position: relative;
    padding: 15px 0;
    margin-bottom: 1px;
    min-height: 60px;
    display: flow-root;
}
.tabs--primary:before, .tabs--primary:after {
    content: "";
    position: absolute;
    background: #E9E8E8;
    top: 0;
    bottom: 0;
    width: 9999px;
}
.tabs--primary:before {
    right: 100%;
}
.tabs--primary:after {
    left: 100%;
}

Answer 1

我认为这是与 iOS Safari 相关的问题，目前不支持 display: flow-root;。但是，包括 Chrome 在内的大多数桌面浏览器目前都支持此功能。

这很可能是您在桌面上查看网站还是在 iPhone 上查看网站时得到不同结果的原因。

CanIUse display: flow-root;

根据您的 CSS 设置方式，您可以尝试使用 display: block; 代替。但是，如果您将其用作创建新块格式化上下文的一种方式，则必须使用一些变通方法才能使其正常工作。这是一篇关于 clearfix hack 的精彩文章。