Question

我正在创建一个应该适应多种屏幕尺寸的网页。为此，我在样式表中使用css媒体查询。

一切正常，直到我在Microsoft Edge进行测试（Firefox和Chrome做他们应该做的事情）。看起来Microsoft Edge只使用第一个媒体查询。

当我删除第一个媒体查询时，使用第二个...

这是一个常见问题吗？有没有人遇到同样的问题？

我使用该行进行媒体查询：@media all和（max-height：600px）

这是相关代码：

<a href="#top" id="go-to-top"><i class="fa fa-arrow-up"></i></a>
    <nav>
        <button id="cross" class="cross menuButtonNotVisible"><i class="fa fa-times"></i></button>
        <button id="parametres" class="parametres menuButtonVisible"><i class="fa fa-bars"></i></button>
        <a href="#one">Home</a>
        <a href="#two">Wie we zijn</a>
        <a href="#three">Wat we doen</a>
        <a href="#four">Locatie</a>
        <a href="#six">Contacteer ons</a>
    </nav>
    <header>
        <h1>Mooi design. Gebruiksvriendelijk. Op alles voorzien.</h1>
        <h2>Deze website is een voorbeeld van hoe uw website eruit zou kunnen zien. Vragen?</h2>
        <h3><a href="#six">Vraag uw gratis offerte aan</a></h3>
        <div id="angle-down"><a href="#one" id="angle-down"><i class="fa fa-angle-down"></i></a></div>
    </header>
    <div id="iconBar">
        <ul>
            <li><a href="#one"><i class="fa fa-cube"></i><p>Op maat</p></a></li>
            <li><a href="#two"><i class="fa fa-shield"></i><p>Veiligheid</p></a></li>
            <li><a href="#three"><i class="fa fa-search"></i><p>SEO</p></a></li>
            <li><a href="#four"><i class="fa fa-mobile"></i><p>Responsive</p></a></li>
            <li><a href="#six"><i class="fa fa-code"></i><p>Interactief</p></a></li>
        </ul>
    </div>
    <div class="wrapper">

@media all and (max-height: 600px){
header h1{margin-top:3em;}
header h2, header h3{display:none;}
header {height:300px;}
#iconBar ul{top:300px; height:150px;}
.wrapper{top:450px;}
}
@media all and (max-width: 700px){
.noResponsiveDisplay{
display:none;
}
nav, .sticky{
background-color:#323a45;
margin:0;
padding:0 1em 3em 1em;
color:white;
display:block;
height:1.3em;
overflow:hidden;
position:fixed;
border:0px solid black;
}
nav a, .sticky a{
clear:both;
display:block;
padding:0 0 0.4em 0;
font-size:1.5em;
color:white;
}
#iconBar{
display:none;
}
header{
height:78%;
}
header h1{
margin-top:6em;
font-size:1.5em;
}
header h2{
font-size:0.8em;
}
.wrapper{
top:78%;
}
.menuButtonVisible{
display:block;
}
.mobileMenu{
overflow:visible;
display:show;
height:auto;
}
}

下面是第三个媒体查询。但是，只有在删除第一个和第二个媒体查询时，此方法才有效。

Answer 1

我在classygroundcovers.com上遇到了同样的问题，在Edge中有几件事情被打破，因为只有第一件事被采用。 Chrome / FF / IE是否会获得超过590px的聊天窗口小部件，在Edge中，无论宽度是多少，都会在底部导航栏中显示文本链接。

Answer 2

这取决于你的默认样式表是什么，如果你想告诉浏览器当宽度小于700px时应用这些样式但是一旦高度小于600px，这些样式的这些样式就会超过这些样式。为此你需要把媒体查询＆＃34; @media all和（max-width：700px）＆＃34;在此媒体查询之上＆＃34; @media all和（max-height：600px）＆＃34;。我希望它能奏效。

多个媒体查询导致Microsoft Edge出现问题

2 个答案: