Chrome 和 Opera 在使用浮动时失败

发布于 2024-12-04 14:53:45 字数 300 浏览 2 评论 0原文

我在指定元素的尺寸时使用浮点数。请参阅此 jsfiddle jsfiddle.net/yMTGJ 但是 Chrome 和 Opera 都无法设置正确的宽度,因此出现两个 div 之间有一个像素间隙,如您在图片 https://i.sstatic.net/O9ZxW.png Chrome和Opera不能正确处理浮动吗?为什么会有一个像素间隙?

I am using floats when specifying dimensions of an element. Please see this jsfiddle jsfiddle.net/yMTGJ But both Chrome and Opera fail setting up the right widths and as a result there one pixel gap between the two divs, as you can see from see image https://i.sstatic.net/O9ZxW.png Can't Chrome and Opera handle the float properly? Why is there that one pixel gap?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

骷髅 2024-12-11 14:53:46

发生这种情况是因为您将宽度指定为 466.5px,而其他浏览器(例如 Firefox)将其舍入为 467px。 chrome 尝试正确渲染它,因此有一条像素线以红色/黄色组合显示(这使浏览器感到困惑,看起来像但不是间隙)。

为了避免这种情况,不要使用半像素来指定尺寸(您认为示例应该是什么样子?chrome 完全符合我的预期,但我不知道您使用半像素的意图)。

看看 http://jsfiddle.net/Lupna/ 我调整了外部 div 的宽度到 932px 和内部的 466px - 在 Chrome 上完美运行。

编辑:
如果您需要 933px 的宽度,另一种使所有浏览器显示相同的解决方案是自己构建一个应该存在的间隙:http://jsfiddle.net/eS7Qd/

this happens because you're specifying the width as 466.5px, wich is roundet up to 467px by other browsers (firefox for example). chrome tries to render this correctly, so there's a one pixel line that shows in red/yellow combined (wich confuses the browser and looks like but isn't a gap).

to avoid this, don't use half pixels to specify dimensions (what did you think the example should look like? chrome does exactly what i would expect, but i don't know your intention to use half pixels).

take a look at http://jsfiddle.net/Lupna/ where i have adjusted the width of the outer div to 932px and the inner ones to 466px - works perfectly on chrome.

EDIT:
another solution that would make all browsers display the same if you need a width of 933px would be to built in a gap on your own that should be there: http://jsfiddle.net/eS7Qd/

ㄖ落Θ余辉 2024-12-11 14:53:46

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

There's your problem: width: 466.5px; Decimal point is not universally supported. Some info and possible solution: http://www.latentmotion.com/browsers-trim-pixel-decimals/

佞臣 2024-12-11 14:53:46

如上所述,问题出在半像素上。显示器的工作原理和像素是一块无法减半的光块。某些浏览器可能会尝试巧妙地解决此问题,但这样做时您无法在所有浏览器中获得一致的结果。

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

内容这样你就可以让它工作,因为它不是有效的 CSS。

As said above the problem is with the half pixel. Monitors work and pixels which is a block of light which cannot be halfed. Some browsers may try and be clever to fix this problem but you cannot obtain a consistent result across all browsers when doing this.

I would recommend you work to a 960px width and use something like http://www.960.gs

There is no way you can get this to work as it is not valid CSS.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文