CSS - 虚线边框Bug?

时间:2013-06-30 11:18:07

标签: css border dotted-line

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

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

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

Dotted Button

我做错了什么?

修改

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

2 个答案:

答案 0 :(得分:4)

浏览器中有一些错误呈现一个像素宽的虚线边框,例如, 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似乎就会消失。

答案 1 :(得分:0)

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

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

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