css - border-bottom dotted 在 Chrome 的开始/结束处有实线

Question

我创建了一个 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

Answer 1

我还没有在 Retina 上测试过这个解决方案，但是你可以尝试使用半径值来精确/接近你想要的。这是我处理错误的方式:

.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>

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