border-bottom dotted在Chrome的开头/结尾处有实线

Question

我已经创建了一个小提琴来说明这一点: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

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

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

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