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

Question

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

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

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

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

因为这不是一个 one-page 网站，我需要 css 自动为我做这件事，而不需要我在每个页面上找出正确的 min-height。

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

<!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 应用了不同的行为（至少在这种情况下）。我没有深入研究规范以了解哪种行为更符合标准，因此我无法告诉您哪种呈现是正确的。

但底线是：

Replace the <article> tags with simple <div> tags. That will keep your layout intact in Safari.

我还测试了您代码中的 HTML5 aside 和 footer 元素，没有发现任何问题。尽管如果您将来遇到任何障碍，这可能是开始进行故障排除的好地方。

最后，作为旁注，您可能需要考虑寻找替代 HTML <center> 标签。此标签已被弃用，目前正在 dropped by the browsers.

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

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

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

Safari displays overlapping elements when using media query

css

safari

mobile-safari