Белая линия между фоновым изображением в Edge Chromium - PullRequest
Новая
       6

Белая линия между фоновым изображением в Edge Chromium

0 голосов
/ 25 марта 2020

У меня есть следующая простая таблица CSS, которую я создал в http://www.cssdesk.com/fWHGe

При просмотре через Chrome или IE вы видите, что она отображается нормально.

enter image description here

Однако, когда я просматриваю его в новом браузере Edge Chromium, между ними появляется эта раздражающая белая линия. Знаете ли вы, что Edge browser по умолчанию CSS как-то вызвал это?

Я замечаю, что когда я увеличиваю или уменьшаю масштаб в браузере (Edge Chromium), на определенном уровне эта белая линия исчезает, но я вижу белую линия на 100%. У меня разрешение экрана 1920х1080

enter image description here

1 Ответ

1 голос
/ 26 марта 2020

Я пытался проверить проблему на моей стороне. У меня разрешение экрана 1920х1080. Я делаю тест на Win 10, браузере MS Edge Chromium и браузере Google Chrome.

Я заметил, что при увеличении 100% оба браузера показывают одинаковый результат без белой линии.

enter image description here

Я заметил, что когда я пытался увеличивать или уменьшать масштаб, оба браузера отображают белую линию в некоторой точке.

enter image description here

Я также делаю тест с браузером IE 11 и firefox, и этой проблемы нет. Таким образом, мы можем сказать, что эта проблема связана с браузерами Chromium.

Я пытался выполнить тесты с некоторым кодом CSS, чтобы решить эту проблему, но проблема сохраняется для браузеров Chromium. В качестве обходного пути, я предлагаю вам обратиться к приведенному ниже примеру для создания кнопки разделения, которая не вызывает этой проблемы. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;

}

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
  display: block;
}

.btn:hover, .dropdown:hover .btn {
  background-color: #0b7dda;
}
</style>
</head>
<body>

<button class="btn">Button</button>
<div class="dropdown">
  <button class="btn">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Ссылка:

Раскрывающиеся кнопки Split Button

Кроме того, вы можете изменить пример на основе ваших собственных требований .

...