CSS границы появляются и исчезают в MS Edge - PullRequest
Новая
       10

CSS границы появляются и исчезают в MS Edge

0 голосов
/ 05 мая 2018

Код моего сайта раздражает. Всякий раз, когда я просматриваю страницу с помощью 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, чтобы границы перестали появляться. Я пытался полностью избавиться от границы, но это не сработало. Есть ли способ это исправить?

Ответы [ 3 ]

0 голосов
/ 05 мая 2018

Если вы используете Microsoft Edge, это потому, что это глюк браузера Edge. Вам нужно будет отредактировать это так, чтобы оно отображалось в MS Edge или просто терпеть это прямо сейчас. Попробуйте разместить пробел между элементами панели навигации

0 голосов
/ 05 мая 2018

Я мог бы повторить вашу проблему. это не граница, но на самом деле два полупрозрачных белых фона перекрываются в Ms Edge и создают более смелую белую линию. Вы можете добавить поля между элементами в меню, или лучшим решением было бы вместо этого применить background-color: rgba(255, 255, 255, 0.5); к .Menu (установите прозрачный фон для пунктов меню и оставьте переход к белому фону при наведении).

0 голосов
/ 05 мая 2018

если вы не хотите границы, просто сделайте это 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>
...