Question

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

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

我已实现此菜单，但我无法使自定义图像生效（我使用自定义图像）

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

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

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

Answer 1

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

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

Answer 2

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

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

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

CSS box / ul菜单

2 个答案: