CSSボックス/ ulメニュー

Question

私のCSSが正しく動作するために深刻な問題があります。私が使用している3つのブラウザ（Chrome、IE、FF）では異なって見えます。

は今すぐ手に質問に、私は、次のURLから例をコピーしようとしている： http://www.alistapart.com/articles/taminglists/ だけで、青のメニュー「現実の世界では」ほとんど一番下までスクロールして探してください。

それはChromeで完璧に動作

（私は、カスタムイメージを使用して）私は、このメニューを実装しているが、私は、カスタムイメージは仕事を得ることができない、そして私は私が後だ外観を得ます。 IEでは、メニューの左側に余白が表示され、画像はこのマージンの内側にありますか？ FFでは、画像はテキストの上に置かれ、（マージンのスペースにも）面白いように見えます。

私のURLは次のとおりです。 http://homeweb.mah.se/~M09K0291/123789/Lab7/

私はIE用に別のスタイルシートを追加しようと再びパディング/マージンを削除し、それがうまくいきませんでしたされています。私はChromeが生産している出力が必要です。

Answer 1

すべてのブラウザには、マージン、パディング、スペーシングなどのための独自のデフォルト設定があります。その違いは、CSSのほとんどの部分です。サイト全体に対してusing a reset stylesheetを検討してください。これは、すべてのブラウザが認識しなければならない共通のベースラインを与えるはずです。スタイルシート全体にリセットCSSを設定したくない、または余裕がない場合は、少なくともメニューに合わせてCSSを作成してください。

これはあなたのメニューの最初のルールは、この1の後に、他のメニュースタイルを定義してください：

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

あなたの問題のほとんどを解決する必要があること。

Answer 2

問題は、ブラウザによってリストが作成される方法（リスト項目の余白や余白のいずれか）が原因である可能性があります。

あなたはのlist-style-位置ルールを削除し、32PXマージン左李タグ上を与える場合は、チェックマークが表示されますが、少なくともFirefoxでは、説明の道を並んで。 Firebugの拡張機能は、このような問題を診断する上で大きな助けとなります。

リセットスタイルシートは、ブラウザがスタイルを処理する方法を統一するのにも役立ちます（正しく記述されているとおり、より速い回答）。