Question

以下HTML代码在chrome中看起来不错，但它在firefox中看起来不太好（标题和链接之间的距离与Chrome中的不一样）...谁知道如何优化它？< / p>

它应该是这样的（Chromium截图）：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代码：

    <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; }

但这不会起作用：/

Answer 1

在我的机器上，我没有看到标题和chrome和firefox之间的间距有任何差异，但我和IE一样。所以，我为h1标签添加了额外的css样式。

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

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

Answer 2

这可能是线高问题。尝试在Title和Main Div中设置行高。

Answer 3

您应该通过将UL元素设置为零来删除UL元素的填充和边距。

ul{
  margin:0;
  padding:0;
}

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

我的CSS代码有什么问题？

3 个答案: