我正在尝试调整我的导航栏的悬停，但没有成功，我的 css 因此它适用于 Chrome 浏览器(仅在 IE 中工作正常)。问题似乎是两个浏览器的显示大小不一样，因为我在边距中使用 % 值(移动 navBar)，它们在 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 中的外观:
最佳答案
这是代码。希望它能正常工作。如果有任何变化，请告诉我。
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>关于html - IE 和 Chrome 中的边距百分比不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59263838/