我的CSS代码有什么问题？

Question

以下 HTML 代码在 Chrome 中看起来不错，但在 Firefox 中不太好(标题和链接之间的距离与 Chrome 不同)...谁知道如何优化它？

这是它应该长成的样子 (Chromium Screenshot): http://i.imgur.com/R6DZk.png
这是在 Firefox 中的外观: http://i.imgur.com/18SmK.png 以下是 CSS 代码：

        html, body {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
    body {
        background-image: url(background.png);
        background-repeat: repeat;
        background-position: top left;
    }
    #main {
        font-family: 'Raleway', sans-serif;
        position: absolute;
        left: 190px;
        top: 240px;
        font-size: 26px;
    }
    #title {
        position: absolute;
        left: 180px;
        top: 110px;
        font-family: 'Vollkorn', serif;
        font-size: 26px;
    }
    a:link, a:visited {
        text-decoration: none;
        font-family: 'Raleway', sans-serif;
        color:  #000000;
    }
    a:hover {
        text-decoration: underline;
    }
    ::-moz-selection { 
        background: #fe57a1; 
        color: #fff; 
        text-shadow: none;
    }
    ::selection { 
        background: #fe57a1; 
        color: #fff; 
        text-shadow: none; 
    }

这是HTML代码：

这是HTML代码：

    <div id="title">
    <h1>Title</h1>
</div>
<div id="main">
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
</div>

我个人认为将标题放入主要的 div 中会更容易:

<div id="main">
<h1>Title</h1>
    <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    </ul>
</div>

然后在CSS中：

h1 { font-family: 'Vollkorn', serif; font-size: 26px; font-weight: bold; }

但是它的效果不如预期 :/

- S3iOp

---

您可能需要考虑使用 CSS 重置样式表。虽然浏览器通常具有相同的默认边距、边框等值，但有时并非如此（这会导致您的样式设置未被覆盖而出现奇怪的情况）。 - Brad Christie

在许多情况下，规范化比重置更好，因为您不必重新声明已在重置中删除的所有样式。 http://html5boilerplate.com/ 是一个很好的起点；它们有关于normalize.css的详细说明。 - Larry

CSS重置，但我觉得那是一个有点可怕的解决方案:D 如前所述，我认为问题在于标题未包含在主标签中，并且我定义了标题和主标签的位置两次，这是不必要的:D 但作为CSS初学者，我没有足够的技能来自己修复它:( - S3iOp

Answer 1

在我的电脑上，我没有看到Chrome和Firefox之间的标题和正文间距有任何区别，但是在IE中有。因此，我为h1标签添加了额外的CSS样式。

h1 {
padding: 0px;
font-family: 'Vollkorn', serif; 
font-size: 26px; 
}

那似乎有助于使间距更加一致。

- user1041890

Answer 2

您应该将 UL 元素的 padding 和 margin 设置为零，以去除它们。

ul{
  margin:0;
  padding:0;
}

你也可以使用CSS重置代码轻松地在大多数浏览器上获得相同的视图。

- Serkan Yersen

Answer 3

可能是行高的问题。尝试在标题和主要区域中设置行高。

- Guy

---

好的，尝试一下别人说的，在你的主CSS文件上面添加一个浏览器重置文件。雅虎有一个很好的CSS重置文件。 - Guy