菜单填充问题自FireFox 4

我已经检查了其他问题在这里，但我还没有找到任何帮助我的东西。菜单填充问题自FireFox 4

自FireFox 4发布以来，我一直在我的网站上的菜单有问题。

www.ffxivinfo.com

正如你可以看到，菜单应该沿着小图形按钮配合，使每个环节上的“按钮”。在Chrome中，IE8（未检查9）和FireFox 3.5这看起来很完美。但是，由于FireFox 4它显示错误。

看起来这是一个填充问题，但我不知道它来自哪里。我甚至删除了每个链接之间的填充，使它们靠得很近（0填充），但菜单仍然比其他浏览器中的FireFox 4+更向右延伸。

我使用purecssmenu.com上提供的自动生成的菜单，并对其进行了修改以适合我自己的网站。

这里是一个链接，只是导航代码，我用一个PHP include来插入它。 http://www.ffxivinfo.com/nav.php

这里是一个链接到它的CSS。 http://www.ffxivinfo.com/navstyle.css

基本上我需要导航在所有浏览器中看起来都一样，以便它适合图形“按钮”。我试图放弃目前的设计并采用简单的渐变背景，并且在FireFox 4+中将菜单放在比其他浏览器更宽的地方，但这有点失败。

任何帮助将不胜感激。这是编码问题第一次将我送到论坛寻求帮助，但我无法弄清楚这一点。

来源

2011-09-02 David

看起来好像没什么问题在FF6 –

我相信问题不在于您的利润空间，而是由于浏览器之间文本呈现的差异。在这种情况下，Firefox正在将文本渲染得更宽一些。

如果我可能会建议一个替代方案，而不是使用图像背景并希望进行像素完美渲染（这种情况在考虑到浏览器和操作系统的多样性时不太可能）尝试使用背景颜色为链接本身设计样式边界半径。

来源

2011-09-03 00:32:18 ajsharma

哇我甚至不知道存在边界半径。我还不熟悉所有的CSS3功能。我可以砍掉那么多代码，试图用CSS2为我的头文件破解圆角。我喜欢这个选择，但是我仍然想找到一个解决方案，因为当它们以这种方式展开并且用户登录（菜单中的不同链接）时，这组链接对于FireFox中可用的空间显得太宽。 – David

正如我所说，我认为你的核心问题是由于文本渲染的差异。尝试使用'background-color'作为链接，而不是整行的图像。 'border-radius'可以让你在大多数现代浏览器上拥有圆角，而对于旧版本的浏览器则有一个方形背景（在大多数情况下是可接受的后备）。 – ajsharma

我在FF6中看不到问题。但是，我看到你在pt中指定你的字体大小。 pt用于打印，而不是网页。尝试将其更改为px，看看是否能解决您的情况。

来源

2011-09-03 01:17:39 Rob

这很奇怪。它出现在FF6中，自FF4以来，在所有版本中都有。 http://img689.imageshack.us/img689/6707/ff6menu.jpg px vs pt真的很重要吗？我可以试试看。 – David

我尝试在网站的非实时版本中将pt字体大小更改为px以进行测试。它使它看起来更好，但它仍然是错误的。在px中，就像每个链接比Chrome中的宽度要大一个像素。所以当你到达最后一个链接的时候，它的大小约为10像素。当然，我可以改变图像来解释这一点，但在Chrome和大概是IE9中这是错误的。我想我可以接受这一点，并使用我发现的由于ajsharma而发现的边界半径。当我建立这个网站时，我甚至不认为CSS3被使用。我很好奇为什么在你/其他人的FF6中看起来很好。 – David

我可能会忽略Firefox 4的问题。

FF现在是第6版

您的问题不会出现在FF3.5（使用最广泛的FF）或FF6，两者都具有比FF4更多的浏览器份额。

http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar

来源

2011-09-03 03:00:53

它出现在FF6对我来说... http://img689.imageshack.us/img689/6707/ff6menu.jpg – David

嗯..我正在做什么其他人不得不说FF6没有问题。 –

菜单填充问题自FireFox 4

回答

相关问题