Firefox 和 IE8 中奇怪的居中问题
我网站上的导航栏 http://hungryathome.net 在 Firefox 和 IE8 标准模式下无法正确居中。它在 IE7 兼容模式和 Chrome 中正确居中。
奇怪的是,将 div (id="navlinks") 上的边距设置为 4px 或更大将使其正确居中。任何不足都会导致它稍微偏离中心。我在 Firebug 中来回更改了这些值,这让我很困惑。有什么解释为什么会发生这种情况吗?
The navigation bar on my site http://hungryathome.net doesn't center properly on Firefox and IE8 Standards mode. It centers properly in IE7 Compatability mode and in Chrome.
What's odd is that setting a Margin on the div (id="navlinks") to 4px or more will make it center properly. Any less will result in it being slightly off-center. I changed the values back and forth in Firebug and it's confusing the heck out of me. Any explanation for why that's happening?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
啊哈,看看 Firebug 使用他们很棒的控件,将蓝色放在元素上,你的标题图像实际上悬挂在导航栏上大约 3 或 4 像素,这导致它移动导航并实际上使其变小,所以它“正确”地居中。尝试将标题提高几个像素,直到其正确固定到位。
示例 http://img809.imageshack.us/img809/9784/example.jpg
编辑: 或者对该图像应用
border: 0
样式,这样它就不会在其周围添加边框,可能是更好的解决方案...Aha, looking at Firebug using their awesome controls which put the blue color over the elements, your header image is actually hanging down about 3 or 4 pixels over your nav bar, which is causing it to move the nav over and actually make it smaller, so it is centering it "properly". Try making your header a few pixels taller until it snaps into position correctly.
example http://img809.imageshack.us/img809/9784/example.jpg
EDIT: Or apply a
border: 0
style to that image so it doesn't add the border around it, might be a better solution...