表格宽度 100% 偏离单个像素（取决于实际宽度）答案

【问题标题】：Table width 100% is off by a single pixel (depending on actual width)表格宽度 100% 偏离单个像素（取决于实际宽度）
【发布时间】：2014-06-27 02:35:34
【问题描述】：

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

相关的 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 中重现它。

【问题讨论】：

你能提供一个 jsfiddle.net / 链接吗？
我无法复制它。 jsfiddle.net/E2mUQ/1
@YosepKim 在 Chrome 中查看该 JSfiddle 时，它显示了相同的行为。
@MDeSchaepmeester 在我的 MacBook 的镀铬和窗框的镀铬上看起来不错。这很奇怪……
@YosepKim 那可能是另一个版本。

标签： html css google-chrome width

【解决方案1】：

在 CHROME 上为我复制了错误。

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

在inspect element HTML部分，它定义表格的宽度为218px，包含的div为217px..

当我稍微扩大浏览器窗口时，表格宽度从 217.443 像素增加到 217.680 像素，

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

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

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

edit：试试这个，看看它是否适合你。我已经解决了这个 jfiddle 中的问题（我认为）

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

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

【讨论】：

我觉得奇怪的是浏览器会从它所在的任何容器中分别计算100% 元素的宽度。此外，至少对于我的.info div，计算应该返回相同的数字和桌子。
stackoverflow.com/questions/4308989/…
hmm，从对这个亚像素渲染问题的研究来看，似乎没有快速解决方法。（有些人使用过 Javascript）但至少你知道为什么现在会出现这个问题，并且可以寻找解决/绕过它的方法。祝你好运。
如果你的表格元素有table-layout: fixed;怎么办？如果您在表格上也设置了display: block;，则表格大小不正确。

【解决方案2】：

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

width: 100.12%

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

它对我有用。不过，这有点肮脏。

【讨论】：

您也可以使用width: calc(100% + 0.5px)（或其他值），它适用于任何规模。不过我不知道浏览器的兼容性。
@NotEnoughData 这是一个快速修复，但我必须使用 1px。使用 0.5px 仍然显示出差距。

【解决方案3】：

我认为这与内嵌/外置边框有关——这在浏览器之间是不同的。尝试将边框应用于父 div 而不是表格。这应该解决。

【讨论】：

内嵌/外嵌边框是什么意思？此外，如果我将边框应用到父 div，分页符会因为旁边有一个 div 占用剩余的宽度（设置为 60%）。

相关标记

相关的 CSS