我在让css正常工作方面遇到了严重问题。它在我使用的所有3种浏览器中看起来都不同(Chrome,IE和FF)。
现在对于手头的问题,我一直在尝试从以下网址复制示例: http://www.alistapart.com/articles/taminglists/ 只需向下滚动到底部,然后查找“真实世界”和蓝色菜单。
我已实现此菜单,但我无法使自定义图像生效(我使用自定义图像)
它在Chrome中完美运行,然后我得到了我追求的外观。在IE中,我在图像所在菜单的左侧获得了一个边距,图像在此边距内?在FF中,图像将自己置于文本上方并创建一个有趣的外观(也在边距空间中)。
我的网址是: http://homeweb.mah.se/~M09K0291/123789/Lab7/
我一直在尝试为IE添加单独的样式表并再次删除填充/边距,但这不起作用。我想要Chrome正在生成的输出。
答案 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扩展对诊断此类问题有很大帮助。
重置样式表还可以帮助您统一浏览器处理样式的方式(正确陈述的更快答案)。