Question

问题：Safari在CSS媒体查询样式中显示重叠元素。

在Chrome和Firefox上，一切都正常显示。这是一个截图：

然而，当我在Safari桌面（Safari 8.0，浏览器宽度调整为移动设备）和实际移动设备（iphone 6.0 / iOS 8.3 / safari浏览器）上进行测试时，文章会被重叠，这是页脚重叠。

我发现了一个不受欢迎的解决方法 - 将媒体查询样式中的min-height设置为600px（例如）。这将定位内容，使其在移动设备上看起来不错。

由于这不是一个单页的网站，我需要css自动为我做这个，而不必在每个页面上找出正确的最小高度。

我是新手，所以如果你能提供实际代码，那将是最有帮助的。感谢您的帮助。

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

#main {
border: 5px solid purple;
width:80%;
min-height:500px;
display: -webkit-flex;
display:         flex;
-webkit-flex-flow: row;
        flex-flow: row;
}

#main > article {
    min-width:400px;
      border: 5px solid green;
    -webkit-flex: 60%;
            flex: 60%;
}

#main > footer {
      border: 5px solid yellow;
}

/* Too narrow to support two columns */
@media all and (max-width: 640px) {

    #main {
    width:100%;
    -webkit-flex-flow: column;
          flex-direction: column;
    }

    #main > article {
    min-height:320px;
    }

    #main > aside {
    min-height:200px;
    }
}
</style>

<div id="container">
    <center>
    <div id="main">
      <article> 
      <div style="background-color:linen;width:100%;height:500px" id="div1"> 
        <div style="background-color:red;width:386px;height:386px"> 
        <p>article</p>
        </div>
      </div>
      </article>

      <aside style="border:5px solid black">
      <center>
      <div style="background-color:orange;width:300px;height:300px" id="div2">
      <p>aside</p>
      </div>
      </center>
      </aside>
    </div> 
    </center>

    <footer>
    <div style="background-color:green;width:100%;height:50px" id="div3">
    <p>footer</p>
    </div>
    </footer>
</div>

Answer 1

好的，我想我解决了你的问题。

我在iPad上的Safari中测试了这个解决方案，但它确实有效。

问题的根源是HTML5 <article>标记。

虽然article似乎是supported by all major browsers，但Chrome和Firefox会对此元素应用一种行为，而Safari会应用不同的行为（至少在这种情况下）。我没有深入研究规范，知道哪种行为更贴近标准，所以我无法告诉你哪种渲染是正确的。

但底线：

将<article>标记替换为简单的<div>标记。那会保持你的布局在Safari中完好无损。

我还测试了代码中的HTML5 aside和footer元素，并没有发现任何问题。虽然如果你在未来遇到任何障碍，可能是开始排除故障的好地方。

最后，作为旁注 ，您可能需要考虑查找HTML <center>代码的替代品。此代码已弃用，目前正处于dropped by the browsers。

还有许多其他方法可以使元素以符合最佳实践的方式居中。我最近写了一个涵盖这个主题的答案： How to Center Elements Within a Div

希望这会有所帮助。祝你好运！

使用媒体查询时，Safari会显示重叠元素

1 个答案: