CSS - 虚线边框Bug？

Question

我只是使用一个简单的CSS代码：

button {
border: 1px dotted #bebebe;
background: #eeeeee;
font-size: 20px;
color: black;
padding: 7px;
border-radius: 4px;
}

但是虚线边框没有显示在左侧：

我做错了什么？

修改

嗯，对于遇到此问题的每个人，都是关于您正在使用和缩放的导航器。我不知道为什么但是有些按钮可以看到四面的边框，有些按钮则不能。

Answer 1

浏览器中有一些错误呈现一个像素宽的虚线边框，例如， Mozilla错误报告Dotted/dashed border-radiused corners are rendered as solid和Chromium错误报告Another Border-Bug: dotted line turns solid on the half way。您似乎在Chrome中触发了其中一个此类错误。在Win 7上的Chrome 28bet​​a中测试你的jdsfiddle，我可以看到左边框是实心的，左下边框是实心的。 （这有点难以看到，但是如果你拍摄截图并将其缩放或将边框颜色设置为红色，它会变得更加明显。）

我担心找到一个可接受的解决方法可能很困难。在这种特殊情况下，如果你删除了圆角（你可能不想这样做）或将边框宽度设置为2px，那么这个bug似乎就会消失。

Answer 2

点缀的1px边框很难看到。如果你放大 Cntrl + + 我想你会看到实际上有一个虚线边框。

或者，将1px更改为2px：border: 2px dotted #bebebe;也会显示边框存在。

修改 移除border-radius: 4px;，您将看到虚线边框。