0

最近、IE8 でブラウザーをテストしましたが、多くのことが壊れているようです。テスト サーバー上の私のサイトは次のとおりです: [編集済み]。最新のブラウザで使用すると、問題なく表示されます。ただし、IE8 (または互換モードの IE10) で見ると、いくつかの問題があります。

1) 最大の問題は、コンテナーが機能しないことです。コンテンツを中央に固定幅に保ちながら、ヘッダー/フッターを画面の全幅に表示できる特定の要素の周りにコンテナー クラスがあります。IE8 では、固定幅は機能しません。

コンテナの CSS

.container {
    margin: 0 auto;
    max-width: 1000px;
    min-width: 916px;
}

HTML で使用されるサンプルの 1 つを次に示します (この例では、ヘッダーです。PHP は、メニューで現在のページを強調表示するためのものです)。

<header>
    <div class="container">
        <div class="float-left">
            <a href="/index.php" class="home"><img src="/Images/logo.png" id="logo" alt="logo" /></a>
        </div>

        <div class="float-right">
            <nav>
                <ul id="menu">
                    <li><a href="/index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?> class="home">HOME</a></li>
                    <li><a href="/webgis.php" <?php if (strpos($url, "webgis.php")) { echo " class='active'"; } ?> id="gisnav">WEBGIS</a></li>
                    <li><a href="/documents.php" <?php if (strpos($url, "documents.php")) { echo " class='active'"; } ?> id="docsnav">DOCUMENTS</a></li>
                    <li><a href="/statistics.php" <?php if (strpos($url, "statistics.php")) { echo " class='active'"; } ?> id="statsnav">STATISTICS</a></li>
                    <li><a href="/support.php" <?php if (strpos($url, "support.php")) { echo " class='active'"; } ?> id="supportnav">SUPPORT</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

問題はmargin: 0 auto;、またはコンテナー内の浮動要素にあると思いますが、よくわかりません。

2) ヘッダーの背景は、私が設定した青色のグラデーションではなくなりました。<div>ページの中央にある 3 でグラデーションがまだ機能しているため、これが機能しない理由はわかりません。

ここにヘッダー用の私のCSSがあります

header {
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);

    background-color:#007dc1;

    border:1px solid #124d77;

    color:#ffffff;
    font-size:13px;
    font-weight:700;
    padding:6px 24px;
    text-decoration:none;

    text-shadow:0px 1px 0px #154682;

    height: 50px;
    margin-bottom: 15px;
    text-align: center;
}

また、ヘッダーの HTML は問題 1 にあります)。

3) CSS を変更し<hr>て、繰り返し画像にしました (対角線が 3 ピクセルです)。IE8 では、この画像が正しく表示されていないようです。最新のブラウザーでどのように表示されるかを確認できます

ここにCSSがあります

hr {
    border: 0;
    background: url(/Images/tridots.png) 0 0 repeat-x;
    height: 5px;
    margin: 1em 0;
}

これを修正できない場合は、大した問題ではありません。私はそれを回避することができます

まだ問題はありますが、これらが修正されたときに解決されることを願っています。事前に助けてくれてありがとう！

4

1 に答える 1