0

私の問題: Chrome と Firefox で適切にスタイル設定された Web サイトをコーディングしました。ただし、Internet Explorer(9) では壊れます。灰色のヘッダーの背景はロゴ ブロックの右側に押し上げられ、ボタンは暗い灰色の領域にあるはずです。コードを投稿しました。私はcssの専門家ではありません。ヒントがあれば大歓迎です。(2 番目の画像は目的の結果を表示しています) ここに画像の説明を入力

html: ウェブサイト 

</head>
<body>

<div class="wrap_overall">

    <div class="header">
        <a href="http://localhost">
            <img class="logo" src="http://localhost/images/logo.png" width="175" height="24" alt="weblogo" />
        </a>        
    </div>

    <div class="headerbg"></div>

    <!-- nav top highlight -->
    <div style="background-color:#6c6c6c;margin:9px0px0px;height:1px;width:1020px;z-index:1;"></div>
    <!-- nav bar -->
    <div style="background-color:#5a5a5a;height:53px;width:1020px;z-index:1;"></div>
    <!-- nav bottom frame -->
    <div style="background-color:#d4e6b6;height:13px;width:1020px;z-index:1;border-top:4px solid #9de629; margin:0px 0px 10px;"></div>

    <div class="nav_main">
    <ul>
        <li> <a href="http://localhost/button1">
                <img src="http://localhost/images/button1.png" width="63" height="18" alt="button1" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button2">
                <img src="http://localhost/images/button2.png" width="59" height="18" alt="button2" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button3">
                <img src="http://localhost/images/button3.png" width="62" height="18" alt="button3" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button4">
                <img src="http://localhost/images/button4.png" width="41" height="18" alt="button4" />
            </a> </li>

        <li> <a href="http://localhost/index.php?page=button5">
                <img src="http://localhost/images/button5.png" width="73" height="18" alt="button5" />  
            </a> </li>
    </ul>
    </div>


</div>

</body>
</html>

CSS:

.logo
{
    padding:60px 20px 50px 20px;
}

body
{
    background-color:#282828;
    color:#FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}

body a, img{  border-style:none; color:#9de629; text-decoration:none;}
body a:visited {color:#9de629;}
body a:hover{ color:#FFFFFF; text-decoration:underline;}

.wrap_overall
{
    position:relative;
    width: 1020px;  
    margin:0px auto;
}

.header
{
    width:216px;
    height:148px;
    margin:0px 0px;
    padding:0px 0px;
    background-color:#252525;
    float:left;
    display:inline;
}

.headerbg
{
    margin:0px 0px 0px;
    padding:0px 0px;
    width:1020px;
    height:148px;
    background-color:#c7c7c7;

}

.nav_main/*holds the buttons*/
{

    margin:0px 0px 1px 0px;
    padding:0px 0px 0px 0px;
    position:absolute;
    top:148px;
    left:363px;
    z-index:2;
    overflow: hidden;
}

.nav_main ul 
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    overflow: hidden;
}

.nav_main ul li
{
    margin:0px 0px 0px 0px;
    display: inline;
    float: left;
}

.nav_main ul li a
{
    outline: none;
    border:none;
    margin:0px 0px 0px 0px;
    margin-right:-10px;
    height:54px;
    width:125px;
    color:#FFFFFF;
    background-image:url(../images/button.png);
    text-align:center;
    display:table-cell;
    vertical-align:middle;


}

.nav_main ul li a:hover  
{
    background-image:url(../images/buttonlight.png);
}
4

1 に答える 1

1

あなたの問題は、ポジショニングとスコープです。nav_main コンテンツは、そのコンテナのスコープ内にある必要があります。現在、多くの異なる要素を個別に配置しようとしていますが、それらを「取り付けられた」ように見せようとしていますが、これは基本的に不可能です。

私はあなたに例を提供します：

<div id="header">
<div id="nav-bar">
    <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
    </ul>
</div>
</div>

これは、ヘッダー領域のより適切なレイアウトです。サンプル CSS は、次のロジックに従う場合があります。

#header { background-color: grey; width: 40% height: 200px; position: relative; top: 0;     right: 0; }   // top and right values depend on wrapper container
#nav-bar { background-color: darkgrey; width: 100%; height: 40px; position: relative; bottom: 0; left: 0; }
#nav-bar ul { position: absolute; bottom: 0; right: 0; }

/* Style your #nav-bar ul li stuff here */

セマンティクス レッスンの編集: できる限りインライン スタイルを使用しないようにしてください :)

明確にするために

IE8 以下では、要素の配置は優れたブラウザーの標準と同等ではありませんでした。そのため、すべての要素が不適切にスコープされ、絶対配置を使用すると、これらの問題が発生することになります。

于 2012-10-29T23:07:28.293 に答える