1

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

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

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

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

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

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

4

2 回答 2

0

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

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

于 2009-08-13T12:34:52.197 回答
0

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

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

重置样式表还将帮助您使浏览器处理样式的方式保持一致（作为正确说明的更快答案）。

于 2009-08-13T12:47:55.603 回答