IE 和 Chrome 中的百分比保证金不同

Question

我正在尝试调整我的导航栏的悬停，但没有成功，我的 css 所以它适用于 Chrome 浏览器（仅在 IE 中工作正常）。问题似乎是两个浏览器的显示大小不一样，因为我在边距中使用 % 值（移动导航栏），它们在 IE 和 Chrome 之间有所不同。

我只发现我可以通过先前检查（例如使用 javascript）浏览器来包含不同的样式表。但是，我想找到一个基于 css 的解决方案。有什么想法吗？

我想要的结果是在悬停的每个部分下划线并将此行移动到将悬停的下一个部分。

代码如下：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

* {
 box-sizing: border-box;
}

body {
 font-family: 'Roboto', sans-serif; 
 margin: 0px;
 background:black;
}
a:hover {
 cursor:pointer;
}

.container {
 /*margin-top:40px;*/
 width: 50%;
 background:black;
 margin-left:50%;
}
.white-line {
 position:absolute;
 margin-top:-17px;
 width: 50%;
 background:white;
 height:1px;
 margin-left:50%;
 z-index:0;
}

ul li {
 display: inline;
 text-align: center;
 font-weight:500;
}

.navBar {
 display: inline-block;
 width: 25%;
 padding: .50rem 0;
 margin: 0px;
 text-decoration: none;
 color: white;
}

.one:hover ~ hr {
 margin-right: 75%;
 background: white;
 
}
.two:hover ~ hr {
 margin-right: 25%;
 background: white;
}

.three:hover ~ hr {
 margin-left: 25%;
 background: white;
}

.four:hover ~ hr {
 margin-left: 75%;
 background: white;
}

p{
 font-weight:300;
 font-size:25px;
 color:black;
}

hr {
 height: .25rem;
 width: 25%;
 margin: 0px;
 background: black;
 border: none;
 transition: .3s ease-in-out;
}

@media screen and (max-width: 700px) {

  .container{
 margin-top:50px;
 margin-left:20%;
 width:70%;

  }
  .white-line{
 margin-left:25%;
 width:70%;
  }

}

@media screen and (max-width: 420px) {
 
  .navBar{
 display:block;
   }
 
  .one:hover ~ hr , .two:hover ~ hr, .three:hover ~ hr, .four:hover ~ hr{
 background:transparent;
 width:20px;
  }

 .container{
 margin-left:25%;
  }

 .container ul li a:hover  {
 background:white;
 color: black;
 min-width:200px;
 margin-left:-80px;
  }
  .navBar {
 width: 200px;
    margin-left:-80px;
  }

  
 .white-line{
 background:transparent;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
<title class="title">Welcome to NormMaster</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Selected font Roboto-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>  
<!--navigatio bar-->
<div class="container">
  <ul>
    <li class="one"><a class="navBar" href="#">About</a></li><!--
 --><li class="two"><a class="navBar" href="#">Contact</a></li><!--
 --><li class="three"><a class="navBar" onclick="openForm()" href="#">Register</a></li><!--
 --><li class="four"><a class="navBar" href="#">Log in</a></li>
    <hr />
  </ul>
</div>

<!--line-->
<div class="white-line">
</div>

</body>
</html>

提前致谢！ :)

它在 IE11 中的外观：

Answer 1

这是代码。希望它能正常工作。如果有任何变化，请告诉我。

https://jsfiddle.net/ysm2n58c/7/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

* {
 box-sizing: border-box;
}

body {
 font-family: 'Roboto', sans-serif; 
 margin: 0px;
 background:black;
}
a:hover {
 cursor:pointer;
}

.container {
 /*margin-top:40px;*/
 width: 50%;
 background:black;
 margin-left:50%;
}
.white-line {
 position:absolute;
 margin-top:-17px;
 width: 50%;
 background:white;
 height:1px;
 margin-left:50%;
 z-index:0;
}

ul li {
 display: inline;
 text-align: center;
 font-weight:500;
}

.navBar {
 display: inline-block;
 width: 25%;
 padding: .50rem 0;
 margin: 0px;
 text-decoration: none;
 color: white;
}

.one:hover ~ hr {
 margin-left: 0;
 background: white;
 
}
.two:hover ~ hr {
 margin-left: 25%;
 background: white;
}

.three:hover ~ hr {
 margin-left: 50%;
 background: white;
}

.four:hover ~ hr {
 margin-left: 75%;
 background: white;
}

p{
 font-weight:300;
 font-size:25px;
 color:black;
}

hr {
 height: .25rem;
 width: 25%;
 margin: 0px;
 background: black;
 border: none;
 transition: .3s ease-in-out;
}

@media screen and (max-width: 700px) {

  .container{
 margin-top:50px;
 margin-left:20%;
 width:70%;

  }
  .white-line{
 margin-left:25%;
 width:70%;
  }

}

@media screen and (max-width: 420px) {
 
  .navBar{
 display:block;
   }
 
  .one:hover ~ hr , .two:hover ~ hr, .three:hover ~ hr, .four:hover ~ hr{
 background:transparent;
 width:20px;
  }

 .container{
 margin-left:25%;
  }

 .container ul li a:hover  {
 background:white;
 color: black;
 min-width:200px;
 margin-left:-80px;
  }
  .navBar {
 width: 200px;
    margin-left:-80px;
  }

  
 .white-line{
 background:transparent;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
<title class="title">Welcome to NormMaster</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Selected font Roboto-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>  
<!--navigatio bar-->
<div class="container">
  <ul>
    <li class="one"><a class="navBar" href="#">About</a></li><!--
 --><li class="two"><a class="navBar" href="#">Contact</a></li><!--
 --><li class="three"><a class="navBar" onclick="openForm()" href="#">Register</a></li><!--
 --><li class="four"><a class="navBar" href="#">Log in</a></li>
    <hr />
  </ul>
</div>

<!--line-->
<div class="white-line">
</div>

</body>
</html>

Answer 2

问题与<hr/>标签的初始位置有关，如果我们使用F12开发者工具查看元素，可以看到在IE和Edge浏览器中，<hr/>标签定位在白线的中间。截图如下：

但是，在Chrome和Firefox浏览器中，<hr>标签位于白线的左边。截图如下：

为了解决这个问题，我们可以根据浏览器为导航栏添加相关的CSS样式，请参考以下代码：

    .navBar {
        display: inline-block;
        width: 24%;
        padding: .50rem 0;
        margin: 0px;
        text-decoration: none;
        color: white;
    }
    /*Chrome browser*/
    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
        .one:hover ~ hr {
            background: white;
        }

        .two:hover ~ hr {
            margin-left: 25%;
            background: white;
        }

        .three:hover ~ hr {
            margin-left: 50%;
            background: white;
        }

        .four:hover ~ hr {
            margin-left: 75%;
            background: white;
        }

        p {
            font-weight: 300;
            font-size: 25px;
            color: black;
        }
    }
    /*Microsft Edge browser*/
    @supports (-ms-ime-align:auto) {
        .one:hover ~ hr {
            margin-right: 75%;
            background: white;
        }

        .two:hover ~ hr {
            margin-right: 25%;
            background: white;
        }

        .three:hover ~ hr {
            margin-left: 25%;
            background: white;
        }

        .four:hover ~ hr {
            margin-left: 75%;
            background: white;
        }
    }
    /*IE Browser*/
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

        .one:hover ~ hr {
            margin-right: 75%;
            background: white;
        }

        .two:hover ~ hr {
            margin-right: 25%;
            background: white;
        }

        .three:hover ~ hr {
            margin-left: 25%;
            background: white;
        }

        .four:hover ~ hr {
            margin-left: 75%;
            background: white;
        }
    }

那么，结果是这样的：

Chrome 浏览器：

IE浏览器：

更多详细示例代码，请查看this link。

IE 和 Chrome 中的百分比保证金不同

Percentage margin differs in IE and Chrome

html

css

internet-explorer

google-chrome

display