html - 表格宽度 100% 偏移一个像素(取决于实际宽度)

Question

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

相关标记

这在大多数情况下都有效，但是根据浏览器窗口的宽度，表格的宽度有时会偏离一个像素:

如您在右侧所见，边框是同级 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 element HTML 部分，它定义表格的宽度为 218 px，包含的 div 为 217px..

当我稍微扩展浏览器窗口时，使表格宽度增加超过 217.443 像素，增加到 217.680 像素，

HTML 部分将表格宽度和包含的 div 都显示为 218 像素。

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

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

编辑:试试这个，看看它是否适合你。我已经解决了这个 jfiddle 中的问题(我认为)

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

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