CSS 框/ul 菜单

Question

我在让我的 css 正常工作时遇到了严重的问题。它在我使用的所有 3 种浏览器（Chrome、IE 和 FF）中看起来都不同。

现在到手头的问题，我一直在尝试从以下网址复制示例： http://www.alistapart.com/articles/taminglists/ 只需向下滚动几乎到底部，然后查找“In the Real World”和一个蓝色菜单。

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

它在 Chrome 中完美运行，然后我得到了我所追求的外观。在 IE 中，我在图像所在的菜单左侧有一个边距，并且图像在这个边距内？而在 FF 中，图像将自身置于文本之上并创建一个有趣的外观（也在边缘空间中）。

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

我一直在尝试为 IE 添加单独的样式表并再次删除填充/边距，但这不起作用。我想要 Chrome 正在生成的输出。

Answer 1

问题可能出在不同浏览器创建列表的方式上：在列表项上使用填充或边距。

如果你删除 list-style-position 规则并在 li 标签上留出 32px 的 margin-left，你会看到复选标记，至少在 Firefox 中，按照描述的方式排列。 Firebug 扩展对诊断此类问题有很大帮助。

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

Answer 2

每个浏览器都有自己的边距、内边距、间距等默认设置。这就是 CSS 中大部分差异的来源。为您的整个网站考虑using a reset stylesheet。这应该给你一个所有浏览器都应该承认的通用基线。如果您不想或负担不起为整个样式表设置重置 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;
}

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