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

我尝试在我这边测试这个问题。我的屏幕分辨率是 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>

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

0回答