CSS box / ul菜单

时间:2009-08-13 12:16:30

标签: css padding margin html-lists

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

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

我已实现此菜单,但我无法使自定义图像生效(我使用自定义图像)

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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

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