CSS虚线边框渲染问题答案

【问题标题】：CSS dotted border render issueCSS虚线边框渲染问题
【发布时间】：2012-02-08 00:25:39
【问题描述】：

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

这是一个示例：

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

【问题讨论】：

标签： css border

【解决方案1】：

如果宽度不能被边框宽度整除，则会出现此问题。

这有效： 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 的宽度，因此它可以被边框宽度整除（因为它在您的示例中是动态的）。

【讨论】：

【解决方案2】：

你能把它放在一个较小的容器 div 中并隐藏溢出吗？

【讨论】：