微软edge的页边距与谷歌不同

问题描述 投票：1回答：1

我在我的页面导航中创建了一个子菜单，但当我在Microsoft edge中打开它时，子菜单的上边距与googles不同。

我不确定我到底使用的是哪个版本的MS edge。我想它的默认MS edge版本在windows 10上，所以传统的。

我想就是这个版本吧！关于这个应用：Microsoft 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 "的下方，但在微软Edge中，它的文本溢出。当我把页边距从185px改为385px时，它在Edge中是正确的，但在Google中却较低。

而且我注意到在Internet Explorer 11上，它甚至比谷歌更低。所以在MS Edge中它是向上的，在Google中它是在中间的，而在Internet Explorer 11中它是在底部的。我害怕打开另一个浏览器。

谅谅

google-chrome microsoft-edge margin
1个回答
0
投票

我试图测试这个问题，我可以在MS Edge传统浏览器中看到这个问题。

我试着检查CSS代码，发现以下问题 显示：柔性 和 flex-direction: 列 在 导航仪 导致这个问题的CSS类。

我发现，如果你删除它或注释它，那么它可以帮助解决这个问题在MS Edge传统浏览器中，它也将在其他浏览器中看起来正确。

请注意，我还减少了 垫底 到 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浏览器中输出。

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.