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

Question

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

11

我在一个div里面有一个table，这个div又在另一个div里面。直接的容器宽度是40%，我想通过设置width:100%让表格的宽度与这个div一样宽。

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

- MarioDS

你能提供一个 jsfiddle.net / 链接吗？ - SW4

我无法复制它。http://jsfiddle.net/E2mUQ/1 - Yosep Kim

@YosepKim，在Chrome浏览器中查看该JSfiddle时，显示相同的行为。 - MarioDS

@MDeSchaepmeester 在我的 MacBook 的 Chrome 和 Windows 系统的 Chrome 上看起来都很好。这真的很奇怪... - Yosep Kim

@YosepKim 可能是另一个版本。 - MarioDS

3个回答

4

我曾经遇到同样的问题，通过将宽度稍微调高，成功解决了这个问题：

width: 100.12%

我尝试将额外的百分比缩小到足以解决大多数情况，但不会造成1像素的溢出。

这对我有用。虽然这是一种不太规范的修复方法。

- Thijs Riezebeek

3

您还可以使用width: calc(100% + 0.5px)（或其他参数），这将在任何比例下都有效。不过我不确定其兼容性如何。 - NotEnoughData

1

@NotEnoughData 这是一个快速解决方案，但我不得不使用1像素。使用0.5像素仍然会显示间隙。 - alstr

0

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

- Prinsig

什么是内嵌/外凸边框？如果我将边框应用于父级div，则页面会中断，因为旁边有一个占据剩余宽度的div（设置为60％）。 - MarioDS

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

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

- user1953045 · Accepted Answer

我在CHROME上遇到了相同的错误。

我检查了元素，发现表格框的宽度为217.443像素（显然是由于％宽度引起的）

在检查元素的HTML部分中，它将表格的宽度定义为218像素，包含div的宽度为217像素。

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

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

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

这可能是正确的调查路线吗？

编辑：尝试这个并看看它是否适用于您。我已经在这个jfiddle中解决了问题（我想）

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

我只是移除了.table类上的宽度，并用DISPLAY:block替换了它。

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

相关标记

相关CSS