为什么Firefox在这里显示一个额外的行？

一直试图我最难去除的Firefox从该页面多余的空间（或填充，保证金，不管它是什么）：为什么Firefox在这里显示一个额外的行？

http://emctalk.com.au/

看菜单吗？将其与chrome进行比较，您会发现菜单位于背景下方太远，使布局看起来破碎。

无论如何，我尝试将line-height: 1px添加到UL项目，然后取出LI元素上的height，使它们尽可能小。

这实际上使它看起来很正常，但这种方式，我觉得是一种破解。我很想知道实际问题是什么，以便我可以在将来解决它。

如果无论如何有一些建议如何解决它，这将不胜感激。我使用FF5和最新的Google Chrome。

谢谢。

来源

2011-06-27 Jason

使用CSS重置。 http://meyerweb.com/eric/tools/css/reset/ – bevacqua

请验证您的HTML（http://validator.w3.org/check?uri=http%3A%2F%2Femctalk.com.au%2F&charset= ％28detect +自动％29＆doctype =内联＆组= 0），以便我们知道由于呈现无效的HTML，这不是一个区别。 – Brent

更改你的CSS如下：

/* http://emctalk.com.au/site/assets/template/css/base.css?v2(line: 375)*/ 

.home a { 
    display: block; 
    height: 150px; 
    text-indent: -2000em; 
}

到

/* http://emctalk.com.au/site/assets/template/css/base.css?v2(line: 375)*/ 

.home a { 
    display: block; 
    height: 140px; /*The height 150px causes the problem*/ 
    text-indent: -2000em; 
}

这应该可以解决这个问题。

来源

2011-06-27 02:08:11 GeekTantra

问题是在设置为display:inline时计算#mainmenu li的高度。 Mozilla必须使用padding-top和padding-bottom 13px来计算放置背景打勾图像的位置。

在萤火虫中，我改变下面的填充和高度设置以获得预期的结果。

#mainmenu li { 
    display: inline; 
    float: left; 
    height: 30px; 
    padding-left: 30px; 
    padding-top: 13px; 
}

来源

2011-06-27 02:53:23 natedavisolds

-1

使用

#mainmenu { 
float:left; 
}

包括这在CSS和调整背景按UI。

来源

2011-06-27 07:15:54 SonamSDiwate

为什么Firefox在这里显示一个额外的行？

回答

相关问题