私のCSSコードで何が間違っていますか？

Question

次のHTMLコードはChromeでうまく見えますが、firefox（タイトルとリンクの間の距離はChromeと同じではありません）のようには見えません。

これは、それが（クロムスクリーンショット）のように見えるべきかです：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

私のマシンでは、タイトルと本文のクロムとfirefoxの間隔に違いは見られませんが、私はIEです。そこで、h1タグのCSSスタイルを追加しました。

これは、間隔がより一貫しているように見えます。

Answer 2

それは、行の高さの問題である可能性があります。タイトルとメインディビジョンの両方で行の高さを設定してみてください。

Answer 3

ULエレメントのパディングとマージンをゼロに設定してください。

ul{ 
    margin:0; 
    padding:0; 
} 

CSSリセットコードを使用して、ほとんどのブラウザで同じビューを簡単に表示することもできます。