CSS虚线边框渲染问题

Question

我看到一个 2px 虚线边框的渲染问题，类似于 CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome但在桌面 Safari 和 Chrome 上。我尝试了几种宽度，所有宽度都出现了这种情况

这是一个示例:

垂直线结尾有同样的问题，但它不在画面中。

样本: http://jsfiddle.net/bcdQQ/

Answer 1

如果宽度不能被 border-width 整除，则会出现此问题。

这有效: http://jsfiddle.net/bcdQQ/5/ (为了更好看，我把它弄大了一点)

#prodpre { 
    border-bottom: #555 5px dotted;
    height: 20px;
    margin: 0px 0px 2px 0px;
    padding-bottom: 10px; 
    width: 505px;
}

因此，解决此问题的唯一可能是 javascript 解决方案，它可以更正 div 的宽度，因此它可以被 border-width 整除(因为它在您的示例中是动态的)。