我在 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 中的项目始终对齐,以确保如果某人的浏览器宽度奇数,则不会出现显示异常?(显然,没有在所有其他浏览器中破坏它)