CSS盒/ UL菜单

Question

我有严重的麻烦我的CSS才能正常工作。它看起来在所有3个浏览器，我使用（铬，IE和FF）不同。

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

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

它完全在Chrome，然后我得到的是我找的样子。在IE中我得到了图像位于菜单的左手一侧的边缘和图像这里面保证金？和在FF时，图像将自己置于文本上方，并创建一个有趣的外观（也在空白处的空间）。

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

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

Answer 1

每一个浏览器都有自己的一套默认值的margin，padding，间距，等等。这是大多数的差异来自于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;
}

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

Answer 2

这个问题可能是不同的浏览器创建列表的方式：要么与列表项内边距或页边距

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

一个复位样式也将帮助您带来均匀浏览器处理方式（如更快的答案正确地指出）的方式。