【发布时间】：2020-09-02 17:50:22
【问题描述】：
我在页面的导航中创建了一个子菜单，但是当我在 Microsoft Edge 中打开它时，子菜单的上边距与谷歌不同。
我不确定我使用的是哪个版本的 MS edge。我认为它是 Windows 10 上的默认 MS Edge 版本，非常传统。
我想这是这个版本。 关于这个应用程序： 微软边缘 44.18362.449.0， Microsoft EdgeHTML 18.18362
HTML
<body>
<header>
<div class="head">
<nav>
<ul class="menu-tricks-ul">
<li><a href="Úvod.html">Úvod</a></li>
<li class="menu-tricks-li"><a href="Triky.html">Triky</a>
<div class="sub-menu-1">
<center>
<ul>
<li><a href="Triky.html" >Nejoblíbenější triky</li></a>
<li><a href="Triky s kartami.html">Triky s kartami</li></a>
<li><a href="Kejkle s vejci.html">Kejkle s vejci</li></a>
<li><a href="Hratky s ohnem.html">Hrátky s ohněm</li></a>
<li><a href="Fyzika a chemie ve sluzbach.html">Fyzika a chemie ve službách</li></a>
<li><a href="Zerty se sirkami.html">Žerty se sirkami</li></a>
<li><a href="Kouzelny inkoust.html">Kouzelný inkoust</li></a>
</ul>
</center>
</div>
</li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="#" style="color:#4ababe;">Blog</a></li>
</ul>
</nav>
</div>
</header>
<body>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
font-family: 'Open Sans';
background-image: linear-gradient(to bottom, #58585a, black);
color: white;
margin: 0;
}
.container{
height: auto;
width: 90%;
margin: 0 auto;
padding: 0;
}
a{
color: white;
text-decoration: none;
}
a:hover {
color: #b1b3b4;
}
.head {
width: 100%;
background-image: linear-gradient(to right, #333333, #58585a);
border-bottom: 2px solid white;
}
nav{
height: 10%;
width: 65%;
justify-content: center;
padding-left: 100px;
}
nav ul{
height: 100%;
list-style-type: none;
display: flex;
justify-content: space-around;
}
nav ul li{
display: flex;
flex-direction: column;
justify-content: center;
text-transform: uppercase;
font-size: 150%;
}
.sub-menu-1{
display: none;
}
.menu-tricks-li:hover .sub-menu-1{
display: block;
position: absolute;
background-image: linear-gradient(to bottom, #4ababe, #1c8080);
margin-top: 170px;
margin-left: -120px;
}
.menu-tricks-li:hover .sub-menu-1 ul{
display: block;
}
.menu-tricks-li:hover .sub-menu-1 ul li{
padding: 10px;
background: transparent;
font-size: 80%;
}
谷歌中的子菜单就在“Triky”的下方，但在 Microsoft Edge 中，它的文本会溢出。当我将边距从 185 像素更改为 385 像素时，它在 Edge 中是正确的，但在 Google 中会更低。
我注意到在 Internet Explorer 11 上它甚至比在谷歌上还要低。所以在 MS edge 中它是向上的，在 Google 中它在中间，而在 Internet Explorer 11 中它在底部。我害怕打开其他浏览器。
谢谢
【问题讨论】：
-
看起来您在 MS Edge 旧版浏览器中遇到了这个问题。纠正我，如果我误解了。还请告知我们您用于此测试的 MS Edge 浏览器的版本。我尝试使用 MS Edge 浏览器和 Google Chrome 浏览器测试您的代码。看起来您没有发布足够的代码。目前，它正在显示此输出。 imgur.com/a/OLuqwot 我在两种浏览器中都得到了类似的输出。我建议您发布一个正确的代码，可以正确显示菜单并产生问题。它可以帮助我们更好地理解问题。感谢您的理解。
-
我不确定我到底在使用什么。我认为它是 Windows 10 上的默认 MS Edge 版本，非常传统。关于此应用程序：Microsoft Edge 44.18362.449.0、Microsoft EdgeHTML 18.18362。应该是这个版本吧我在那里更新了代码。
标签： google-chrome microsoft-edge margin