css - 点线的边框底部在Chrome中的开始/结束处有实线

我创建了一个 fiddle 来说明这一点:https://jsfiddle.net/9tu8n4y5/

标记非常简单，因为它看起来像虚线来分隔内容的一部分:

.dot {
    border-bottom: dotted 2px #022169;
}

<div class="dot"></div>

在Firefox 55.0.3中，这看起来与我期望的一样:



但是，在Chrome 61.0.3163.91中，它的开头和结尾都有一个奇怪的“实线”:



更接近:



有谁知道这是为什么吗？我猜这是浏览器特有的问题，不能用CSS更改吗？

我使用的是27英寸5k Retina iMac。但是，我的第二个显示器是非Retina屏幕，其结果是相同的。

Safari 10.0.3的结果与Firefox相同。

编辑(发布后)-报告给Chromium Bugs小组https://bugs.chromium.org/p/chromium/issues/detail?id=766977

最佳答案

我尚未在视网膜上测试过此解决方案，但您可以尝试使用半径值来精确/接近所需值。这是我处理错误的方法:

.border-bug {
  border-bottom: 2px dotted red;
}

.no-border-bug {
   border-bottom: 2px dotted red;
   border-left: 2px solid transparent;
   border-top: 1px solid transparent;
   border-radius: 4px 1px 3px 3px;
}

<div class="border-bug">
Bug Bug Bug.
</div>
<br>
<div class="no-border-bug">
Almost no bug.
</div>

这个错误似乎已经存在了很久了。

关于css - 点线的边框底部在Chrome中的开始/结束处有实线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46318491/