CSS 边框在 MS Edge 中出现和消失

Question

我的网站代码有一个烦人的问题。每当我使用 Microsoft Edge 查看页面并将鼠标悬停在链接上时，其中一个边框会变为白色并保持白色，直到您将鼠标悬停在另一个链接上，这会切换另一个边框。

body {
font-family: Sans-Serif;
background-color: blue;
}
.Overhead {
background-color: red;
background-image: url('cats.jpg');
}
.Title {
margin: 5px;
}
.Active {
background-color: rgba(255, 255, 255, 1);
}
.Menu {
overflow: hidden;
}
.Menu a {
transition: .5s ease;
display: block;
text-align: center;
text-decoration: none;
color: grey;
padding: 5px;
float: left;
width-max: 50px;
background-color: rgba(255, 255, 255, 0.5);
}
.Menu a:visited {
color: grey;
}
.Menu a:hover {
background-color: rgba(255, 255, 255, 1);
}

<div class="Overhead">
<h1 class="Title">Title</h1>
<div class="Menu">
<a class="Active" style="background-color: rgba(255,255,255,1);"><b>Home</b></a>
<a><b>About</b></a>
<a><b>Service</b></a>
<a><b>Contact</b></a>
</div>
</div>

我正在寻找一种更改 CSS 的方法，以便边框停止出现。我试图完全摆脱边界，但这没有奏效。有什么办法可以解决这个问题吗？

Answer 1

如果你不想要边框，就这样做border: 0px solid black;这将使它没有边框，如果你看到一个。

在你的代码中，没有边框，所以如果你看到你的边框，请使用它。

注意：它可能只是border: 0px;，但我还没有尝试过。

$('.a').mouseenter(function() {
$(this).css("border", "0px")
$(this).css("background-color", "rgba(255, 255, 255, 1)");
$(this).css("transition", "0.3s");
});
$('.a').mouseleave(function() {
$(this).css("border", "0px")
$(this).css("background-color", "rgba(255, 255, 255, 0.5)");
$(this).css("transition", "0.3s");
});

body {
font-family: Sans-Serif;
background-color: blue;
}
.Overhead {
background-color: red;
background-image: url('cats.jpg');
}
.Title {
margin: 5px;
}
.Active {
background-color: rgba(255, 255, 255, 1);
}
.Menu {
overflow: hidden;
}
.Menu a {
transition: .5s ease;
display: block;
text-align: center;
text-decoration: none;
color: grey;
padding: 5px;
float: left;
width-max: 50px;
background-color: rgba(255, 255, 255, 0.5);
}
.Menu a:visited {
color: grey;
}
.head {
border: 0px solid black;
}
#service {
margin-left: 0.4px;
}
#contact {
margin-left: 0.35px;
}

}
#container {
background-color: rgba(255, 255, 255, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Overhead">
<h1 class="Title">Title</h1>
<div class="Menu">
<div id="container">
<a class="Active" style="background-color: rgba(255,255,255,1);"><b>Home</b></a>
<a id="about" class="a"><b class="head">About</b></a>
<a id="service" class="a"><b class="head">Service</b></a>
<a id="contact" class="a"><b class="head">Contact</b></a>
</div>
</div>
</div>

Answer 2

我可以复制你的问题。 它不是边框，但实际上两个半透明的白色背景在 Ms Edge 中重叠并创建一条更粗的白线。 您可以在菜单中的项目之间添加边距，或者更好的解决方案是将background-color: rgba(255, 255, 255, 0.5);应用于.Menu(为菜单项设置透明背景并在悬停时保持过渡到白色背景)。

Answer 3

如果您使用的是Microsoft Edge，这是因为它是Edge浏览器故障。 您将需要对其进行编辑，以便它在MS Edge中呈现，或者现在就忍受它。尝试在导航栏项之间放置空格