移动端全宽背景

Question

我很难在手机上使用无序列表ul全宽背景。当我用Chrome测试它时，全宽背景显示没有任何问题(下图1)，但当我在手机上检查它时，我看不到背景(下图2)。

网站地址为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

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

这就是为什么如果你在桌面上浏览网站和在iPhone上浏览结果会有不同的原因。

CanIUse display: flow-root;

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