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

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

css safari

Css 使用媒体查询时，Safari会显示重叠的元素,css,safari,mobile-safari,Css,Safari,Mobile Safari,问题：Safari在CSS媒体查询样式中显示重叠元素在Chrome和Firefox上，一切都能正常显示。以下是一个屏幕截图：然而，当我在Safari桌面（Safari 8.0，浏览器宽度调整为移动大小）和实际移动设备（iphone 6.0/iOS 8.3/Safari浏览器）上测试时，文章被旁白重叠，页脚重叠我发现了一个不可取的解决方法——将媒体查询样式中的minheight设置为600px（例如）。这将定位内容，使其在移动设备上看起来正常因为这不是一个单页的网站，我需要css自动为

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

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

然而，当我在Safari桌面（Safari 8.0，浏览器宽度调整为移动大小）和实际移动设备（iphone 6.0/iOS 8.3/Safari浏览器）上测试时，文章被旁白重叠，页脚重叠

我发现了一个不可取的解决方法——将媒体查询样式中的

minheight

设置为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>


#主要{
边框：5px纯紫色；
宽度：80%；
最小高度：500px；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行；
柔性流：行；
}
#主要>文章{
最小宽度：400px；
边框：5px纯绿色；
-webkit flex:60%；
弹性：60%；
}
#主>页脚{
边框：5px纯黄色；
}
/*太窄，支撑不住两根柱子*/
@介质和全部（最大宽度：640像素）{
#主要{
宽度：100%；
-webkit-flex-flow：列；
弯曲方向：立柱；
}
#主要>文章{
最小高度：320px；
}
#主>旁边{
最小高度：200px；
}
}
文章
旁白
页脚

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

我在我的iPad上的Safari中测试了这个解决方案，它运行正常

问题的根源是HTML5

，Chrome和Firefox对此元素应用了一种行为，Safari则应用了另一种行为（至少在这种情况下）。我还没有深入研究规范以了解哪种行为更符合标准，所以我无法告诉您哪种渲染是正确的
但底线是：
更换
还有许多其他方法可以通过遵循最佳实践的方式来集中元素。我最近写了一个关于这个话题的答案：

希望这有帮助。祝你好运
 您使用的是什么移动设备（浏览器、版本、操作系统）导致了此问题？您是否尝试过在移动视图上使用百分比高度？当我使用运行iOS 8.3的iPhone 6进行测试时，问题出现了，浏览器是Safari。@Michael_B，我刚刚用百分比高度进行了测试，将文章和旁白都更改为100%，但当我在设备上测试时，这并没有解决问题。这就是你想要的效果吗？（垂直调整尺寸）谢谢你的建议。我喜欢你回答的逻辑性，我欣赏你的建议。不幸的是，当我在iMac上使用Safari 8.0进行测试时，它并没有解决问题。下面是我所做的：（1）我用div id=“article1”替换了article标签。（2） 我将css从#main>文章更新为#main>文章1。但是如上所述，safari仍然与mobile view中的元素重叠。奇怪。您是否尝试将文章
替换为div
？只是看看这些元素是否单独起作用。因为这在我的iPad上的Safari中非常有效。此外，正如我在回答中提到的，试着将置于一旁
和页脚
切换到div
s。基于iPhone和iPad上的Safari测试，以及其他浏览器上没有破坏原始布局的事实，我非常确信这是HTML5元素的问题。但我当然可能错了。我很想知道你是否找到了解决办法。是的，很奇怪。我用div替换了文章和页脚，这对我来说不是一个完整的解决方案。然后，我开始更改div id的名称，并删除各种css样式。显然问题是由webkit引起的。当我删除css>-webkit flex中的第19行时：60%；safari将不再与移动视图中的元素重叠。不幸的是，这也会删除样式。我的解决方案只是重新设置样式，在div中使用各种不同的宽度值，而不使用以下元素：article、footer和-webkit-flex:60%。至少我现在有些东西在工作：）谢谢你的帮助，迈克尔。我真的很感激！