3

html5doctor.comのレイアウトを複製しようとしています。ここにIE8をインストールしています。次の出力を生成できます。

ここに画像の説明を入力してください

HTML

<html>
<head>
    <link type="text/css" rel="stylesheet"  href="style.css" />
</head>
<body>
    <div id="header">
    </div>
    <div id="nav">
        <div id="navmenus">
            <ul id="navmenulist">                   
                <li class="menu" id="id1">
                    <a href="#">Home</a>
                <li class="menu">
                    <a href="#">Products</a>
                <li class="menu">
                    <a href="#">About Us</a>
            </ul>
        </div>
    </div>
    <div id="content" >
        <div id="article"></div>
        <div id="sidebar"></div>    
    </div>      
    <div id="footer"></div>
</body>
</html>

CSS

/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/ 
       Just deleted it for simplicity 
*/

body
{
    margin:0px;
    padding:0px;    
    background-color:#E8E8E8;
    text-align:center;
}

#header
{
    background-color:#1F7ADB;
    width:100%;
    height:150px;
}

#nav
{
    background-color:#1F7ADB;
    width:100%;
    text-align:center;  
}

#navmenus
{
    background-color:#14B3F7;
    width:900px;
    text-align:left;    
}

li.menu
{
    list-style:none;
    display:inline;     
    height:35px;
    padding:12px;   
}

li.menu:hover
{
    background-color:yellow;        
}

li.menu a
{   
    text-decoration:none;
    font-family:Arial;
    font-size:18px; 
}

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;

}

li.menu:hover上記のCSSに注目してください。IE8では動作しません。だから私はこのスレッド<!DOCTYPE html>で提案されたように追加しました。

ホバーは機能しましたが、次のようにレイアウトが壊れました。

ここに画像の説明を入力してください

最初にIE8で動作する結果を取得してから、メジャー（IE6ではない可能性があります）ブラウザーで一貫して動作する回避策を学びたいと思います。そして、CSSとHTML（スクリプトなし）に固執することを嬉しく思います。そして何よりも、ここで何が間違っているのかを学びたいと思うでしょう。

4

2 に答える 2

3

text-align:center;からを削除し、ページの中央に配置するブロック要素にbody使用margin:autoします。

#navmenusそれを必要とする要素はとな#contentので、

#navmenus
{
    background-color:#14B3F7;
    width:900px;
    margin:0 auto;   
}

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin:0 auto;
}
于 2012-12-19T11:00:48.027 に答える
0

コンテンツ領域のCSSを次のように更新します。

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin: 0 auto;
}

親要素でtext-alignを使用しようとするのではなく、マージンを使用すると、この要素が中央に配置されます。

于 2012-12-19T11:00:37.557 に答える