Microsoft edge 中的边距顶部与 google 不同
Margin-top different in Microsoft edge than google
我在页面的导航中创建了一个子菜单，但是当我在 Microsoft edge 中打开它时，子菜单的上边距与 googles 不同。
我不确定我使用的是哪个版本的 MS edge。我认为它是 windows 10 上的默认 MS edge 版本，所以很旧。
我想是这个版本。
关于这个应用程序：
微软边缘 44.18362.449.0，
微软 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%;
}
google 中的子菜单位于 "Triky" 下方，但在 Microsoft Edge 中它会溢出文本。当我将边距从 185px 更改为 385px 时，它在 Edge 中是正确的，但在 Google.
中较低
而且我注意到在 Internet Explorer 11 上它甚至比在 google 上还要低。所以在 MS edge 中它在上，在 Google 中它在中间，在 Internet Explorer 11 中它在底部。我不敢打开其他浏览器。
谢谢
我尝试测试该问题，我可以在 MS Edge 旧版浏览器中看到该问题。
我尝试检查 CSS 代码，发现 display: flex 和 flex-direction: column 在 nav ul li CSS class 导致这个问题。
我发现如果您将其删除或对其进行评论，则它可以帮助解决 MS Edge 旧版浏览器中的此问题，并且它在其他浏览器中也能正常显示。
请注意，我还在代码中将 margin-top 减小为 10 px。
修改后的代码：
<!doctype html>
<html>
<head>
<style>
*{
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: 10px;
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%;
}
</style>
</head>
<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>
</html>
MS Edge 旧版浏览器（左侧）和 Google Chrome 浏览器中的输出：
我在页面的导航中创建了一个子菜单，但是当我在 Microsoft edge 中打开它时，子菜单的上边距与 googles 不同。
我不确定我使用的是哪个版本的 MS edge。我认为它是 windows 10 上的默认 MS edge 版本，所以很旧。
我想是这个版本。 关于这个应用程序： 微软边缘 44.18362.449.0， 微软 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%;
}
google 中的子菜单位于 "Triky" 下方，但在 Microsoft Edge 中它会溢出文本。当我将边距从 185px 更改为 385px 时，它在 Edge 中是正确的，但在 Google.
中较低而且我注意到在 Internet Explorer 11 上它甚至比在 google 上还要低。所以在 MS edge 中它在上，在 Google 中它在中间，在 Internet Explorer 11 中它在底部。我不敢打开其他浏览器。
谢谢
我尝试测试该问题，我可以在 MS Edge 旧版浏览器中看到该问题。
我尝试检查 CSS 代码，发现 display: flex 和 flex-direction: column 在 nav ul li CSS class 导致这个问题。
我发现如果您将其删除或对其进行评论，则它可以帮助解决 MS Edge 旧版浏览器中的此问题，并且它在其他浏览器中也能正常显示。
请注意，我还在代码中将 margin-top 减小为 10 px。
修改后的代码：
<!doctype html>
<html>
<head>
<style>
*{
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: 10px;
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%;
}
</style>
</head>
<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>
</html>
MS Edge 旧版浏览器（左侧）和 Google Chrome 浏览器中的输出：