Firefox 3 居中错误(任何 CSS Hacks 或修复吗?)
我在 Firefox 3 中遇到了居中项目的问题。(我进行了搜索,但找不到答案——希望不是重新发布)
我将代码精简为两个元素来演示这一点——你可以在这里看到它: http://prwmusic.com/misc/csstest/home-sample-fix。 html
现在慢慢地使浏览器窗口变宽和变窄。 假设您使用的是 Firefox 3,您是否看到白色背景如何在蓝色 DIV 的左侧随着您拖动的其他像素变宽或变窄而进出? 然而 IE6、IE7、Safari,甚至 FF2 都可以。
我所做的是创建一个 DIV 并添加一个“带有阴影背景的白色页面” 到该 DIV,以便访问者可以在水平滚动条显示之前使浏览器尽可能窄。 然后是一个具有蓝色背景的嵌套 DIV。 背景中的白色区域和蓝色 div 都是 970 像素宽,因此它们应该始终匹配,因为它们都居中。
似乎发生的情况是,当窗口大小为奇数时,Firefox 在背景图像的右侧添加 1,但在前景的左侧添加 1,这会导致所有内容都消失。
第一个想法可能是“只在背景图像中包含蓝色”。 但我正在从事的项目的实际设计相当复杂,这种奇怪的现象发生在整个网站、页面的所有上下部分——对我来说,让蓝色成为背景的一部分不是一个选择。 我只是用这个简单的例子来演示。
有没有办法让 Firefox 3 中的项目始终保持对齐,以确保如果某人的浏览器宽度不正常,则不会出现显示异常? (显然,不会在所有其他浏览器中破坏它)
I'm having issues with centered items in Firefox 3. (I searched and couldn't find this answered -- hopefully not a re-post)
I stripped the code down to just two elements to demonstrate this -- you can see it here:
http://prwmusic.com/misc/csstest/home-sample-fix.html
Now slowly make the browser window wider and narrower. Assuming you are using Firefox 3, do you see how the white background is popping in and out on the left side of the blue DIV with every other pixel you are dragging wider or narrower? Yet IE6, IE7, Safari, and even FF2 are fine.
What I have done is created one DIV and added a "white page with shadow background" to that DIV so that visitors can make the browser as narrow as possible before the horizontal scroll bars show up. Then there is one nested DIV that has a blue background. The white area in the background and the blue-colored div are both 970 pixels wide so they should both always match up since they are both centered.
What appears to be happening is that when the window size is an odd number, Firefox adds 1 to the right side of the background image, but it adds 1 to the LEFT side of the foreground which throws everything off.
The first thought might be "just include the blue in the background image". But the actual design of the project I am working on is rather complex and this oddity happens throughout the site, all up and down parts of the pages -- it's not an option for me to have the blue be part of the background. I'm only using this simple example to demonstrate.
Is there any way to keep the items always aligned in Firefox 3 to ensure that if someone's browser is at an odd width there are no display oddities? (obviously, without breaking it in all the other browsers)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是一个舍入错误。 请参阅此 mozillaZine 论坛主题了解详细信息和可能的修复方法。
This is a rounding error. See this mozillaZine forum topic for the gory details and possible fixes.
您的固定宽度元素位于另一个元素内。
尝试使用固定元素作为容器,并将内部元素的宽度设置为 100%。
You have your fixed-width element inside the other element.
Try using the fixed element as the container, and set the width for the inner element to 100%.