Chrome 和 Opera 在使用浮动时失败
我在指定元素的尺寸时使用浮点数。请参阅此 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
发生这种情况是因为您将宽度指定为
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 to467px
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 to466px
- 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/你的问题是:
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/如上所述,问题出在半像素上。显示器的工作原理和像素是一块无法减半的光块。某些浏览器可能会尝试巧妙地解决此问题,但这样做时您无法在所有浏览器中获得一致的结果。
我建议您使用 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.