CSS框/ul菜单

我很难让css正常工作。我使用的三种浏览器（Chrome、IE和FF）看起来都不一样

现在，对于手头的问题，我一直在尝试从以下url复制示例： 只需向下滚动到底部，查找“真实世界”和蓝色菜单

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

它在Chrome中工作得非常完美，然后我就得到了我想要的外观。在IE中，我在菜单的左侧获得一个空白，图像位于该空白处，并且图像位于该空白处？在FF中，图像位于文本上方，并创建一个有趣的外观（也在空白处）

我的网址是：

---

我一直在尝试为IE添加一个单独的样式表，并再次删除了填充物/边距，但没有成功。我想要Chrome正在生成的输出。

每个浏览器都有自己的一组默认值，用于边距、填充、间距等。这就是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;
}

/*此示例假定包含您的菜单
在ID为“菜单”的*/
div#menu，div#menu ul，#menu li，ul#menu a
{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
垂直对齐：基线；
背景：透明；
线高：1；
列表样式：无；
}

---

这将解决大多数问题。

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

如果删除列表样式的位置规则并在li标记上留下32px的空白，您将看到复选标记，至少在Firefox中是这样排列的。Firebug扩展对诊断此类问题有很大帮助

---

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

它解决了我几乎所有的问题，除了一个问题，图像仍然显示在框外。边缘和填充物现在不见了（感谢上帝）。但在FF中，自定义图像位于方框上方（静止），而在IE中，它的边距位于之前的位置。我刚刚在你发布的链接中查看了你的网站，就我所知，IE7/8和Firefox 3.5中的一切看起来都很好。