使用浮动时Chrome和Opera失败

Question

我在指定元素的尺寸时使用浮点数。请参阅此jsfiddle jsfiddle.net/yMTGJ但Chrome和Opera都无法设置正确的宽度，因此两个div之间会出现一个像素间距，如您所见，可以看到图片i.stack.imgur.com/O9ZxW.png无法使用Chrome和Opera正确处理浮动？为什么会有一个像素间隙？

Answer 1

这是因为你将宽度指定为466.5px，其他浏览器（例如firefox）的宽度最高为467px。 chrome尝试正确渲染，因此有一个像素线以红色/黄色组合显示（这会混淆浏览器看起来像但不是间隙）。

要避免这种情况，请不要使用半像素来指定尺寸（您认为该示例应该是什么样的？chrome完全符合我的预期，但我不知道您打算使用半像素）。< / p>

看一下http://jsfiddle.net/Lupna/，我将外部div的宽度调整为932px，将内部的宽度调整为466px - 在chrome上完美运行。

修改
如果您需要宽度为933px，则会使所有浏览器显示相同的另一种解决方案是建立在您自己应该存在的间隙中：http://jsfiddle.net/eS7Qd/

Answer 2

你的问题是：width: 466.5px;小数点不是普遍支持的。一些信息和可能的解决方案：http://www.latentmotion.com/browsers-trim-pixel-decimals/

Answer 3

如上所述，问题在于半像素。监视工作和像素，这是一块不能半边的光。有些浏览器可能会尝试并且很聪明地解决这个问题，但是在执行此操作时，您无法在所有浏览器中获得一致的结果。

我建议您使用960px的宽度并使用类似http://www.960.gs

的内容

由于它不是有效的CSS，因此无法让它工作。