CSS虚线边框渲染问题

Question

14

我在桌面版Safari和Chrome浏览器中看到了一个渲染问题，类似于CSS在表格的相邻列中使用虚线边框时在Chrome中呈现为破折号的问题。我尝试了几个宽度，所有宽度都存在这个问题。

这是一个示例：

竖线的末端也有同样的问题，但不在图片中。

- Juan Ignacio

2个回答

0

你能把它放在一个更小的容器div里，并使用overflow:hidden属性吗？

- BottleRockets

有时候，它可能会解决一些问题，但应用起来可能会很棘手。 - Juan Ignacio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Armin · Accepted Answer

这个问题发生在宽度不能被边框宽度整除时。

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