表格宽度100％偏离一个像素（取决于实际宽度）

Question

我在另一个table内的div中有一个div。直接容器的宽度为40%，我希望通过设置width: 100%来使表格与此div一样宽。

相关标记

大部分时间都可以使用，具体取决于浏览器窗口的宽度，表格的宽度有时关闭一个像素：

如右图所示，边框是兄弟div .info左边的像素。这些边框应该对齐。

相关CSS

#userListContainer{width: 40%; float: left; }
.info{display:block;line-height:22px; height:22px; padding-left:10px; }
#userListContainer .info {border-right: 1px solid #999999;}

.userList {
    width: 100%; 
    border-right: 1px solid #999999;
    word-break: break-all; border-spacing: 0;
    border-collapse: separate;
}

对我来说似乎是一个渲染错误。它出现在Chrome 34.0.1847.131中，而不是IE10中。我无法在IE10或当前版本的FireFox中重现它。

Answer 1

这个错误在我的CHROME上复制了。

我检查了元素，我注意到的是，表格框的宽度是217.443像素（显然是由于％宽度）

在inspect元素HTML部分中，它将表的宽度定义为218 px，并将包含的div定义为217px ..

当我略微扩展broswer窗口时，使桌面宽度增加到217.443像素，达到217.680像素，

HTML部分显示表宽度和包含div为218 px。

所以我猜测浏览器将像素四舍五入到最近的整个像素。

这可能是调查的正确途径吗？

编辑：试试这个，看看这是否适合你。我已经解决了这个问题（我认为）这个问题

http://jsfiddle.net/E2mUQ/3/

我只是删除了.table类的宽度，并将其与DISPLAY:block

相关联

Answer 2

我遇到了同样的问题并设法通过将宽度设置得稍微高一些来解决它：

width: 100.12%

我试图让额外的百分比足够小以解决大多数情况，但不会造成1 px的溢出。

它对我有用。这虽然是一个肮脏的修复。

Answer 3

我认为这与嵌入/初始化边界有关 - 在浏览器之间有所不同。尝试将边框应用于父div而不是表格。 应对其进行排序。