Edge Chromium 中背景图像之间的白线

Question

我在 http://www.cssdesk.com/fWHGe

创建了以下简单的 CSS table

当您通过 Chrome 或 IE 查看时，您会看到它显示正常。

但是，当我在新的 Edge Chromium 浏览器中查看它时，中间有这条烦人的白线。你知道默认的 Edge 浏览器 CSS 以某种方式导致了这个吗？

我注意到当我在浏览器 (Edge Chromium) 上放大或缩小时，这条白线在一定程度上消失了，但我可以看到 100% 的白线。我的屏幕分辨率是 1920x1080

Answer 1

我试着在我这边测试这个问题。我的屏幕分辨率是 1920x1080。我在 Win 10、MS Edge Chromium 浏览器和 Google Chrome 浏览器上进行了测试。

我注意到当缩放比例为 100% 时，两个浏览器显示的结果相似，没有白线。

我注意到当我尝试放大或缩小时，两个浏览器都会在某个点显示白线。

我也用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 Dropdowns

另外，您可以根据自己的需要修改示例。

Edge Chromium 中背景图像之间的白线

White line between background image in Edge Chromium

html

css

microsoft-edge