CSS盒/ ul菜单

我遇到严重的麻烦让我的CSS正常工作。它在我使用的所有3种浏览器（Chrome，IE和FF）中看起来不同。CSS盒/ ul菜单

我们在手的问题，我一直在努力的例子从以下网址复制： http://www.alistapart.com/articles/taminglists/ 只是向下滚动几乎到了底部，并查找“在现实世界”和一个蓝色的菜单。

我已经实现了这个菜单，但我不能让自定义图像的工作（我使用自定义图像）

它完全在Chrome，然后我得到的是我找的样子。在IE中，我在图像所在菜单的左侧获得了一个边距，图像在这个边距内？在FF中，图像置于文本上方并创建一个有趣的外观（也在边缘空间中）。

我的网址是： http://homeweb.mah.se/~M09K0291/123789/Lab7/

我一直在试图增加对IE一个单独的样式表，并再次取出垫衬/利润率，但没有奏效。我想要Chrome产生的输出。

来源

2009-08-13 Patrick

我刚刚在你发布的链接中检查了你的网站，就我所知，在IE7/8和Firefox 3.5中一切都很好。 – 2009-08-14 01:40:58

每个浏览器都有自己的边缘，填充，间距等缺省设置。这是大多数差异来自CSS的地方。考虑为您的整个网站using a reset stylesheet。这应该给你一个所有浏览器都应该承认的共同基准。如果您不想或者无法为整个样式表设置重置CSS，则至少为您的菜单设置一个CSS。

，是适合您的菜单中的第一条规则，那么这一个定义后，任何其他菜单样式：

/* This example assumes your menu is contained 
    in a <div /> with an ID of "menu" */ 
div#menu, div#menu ul, #menu li, ul#menu a 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    line-height: 1; 
    list-style: none; 
}

这应该可以解决大部分的问题。

来源

2009-08-13 12:34:52

它解决了我几乎所有的问题，除了一个，图像仍然出现在盒子外面。边距和衬垫现在已经消失了（感谢上帝）。但是在FF中，自定义图像位于方框之上（仍然），而在IE中则位于边缘之前的位置。 – Patrick 2009-08-13 12:43:28

问题可能在于不同浏览器创建列表的方式：带有填充项或列表项边距。

如果删除列表样式位置规则并给予32PX上李标签利润率左，你会看到对勾，至少在Firefox中，一字排开描述的方式。 Firebug扩展在诊断这些问题方面很有帮助。

重置样式表还可以帮助您使浏览器处理样式的方式一致（正确说明更快的答案）。

来源

2009-08-13 12:47:55

回答

相关问题