0

このサイトはIE8でご覧ください。下部に、いくつかのアイコンの両側に矢印があることに気付くかもしれません。

ローカルでは、矢印は両側に表示されますが、約 10 ピクセルに縮小され、60 ピクセル x 44 ピクセルになるはずです。サーバー上で表示すると、つぶれたようには見えませんが、アイコンの上と下にあります。ここでどちらの方向に進むべきかわかりません。

Chrome で表示すると問題なく表示され、本来あるべき 3 つのアイコンの両側にあります。それらはすべてIE8でめちゃくちゃになります。私はこのCSS（インラインブロック）をいじっていましたが、役に立ちませんでした。

#nav_arrow {
    display: inline-block !important;   
    }

これがその領域のHTMLです... 

    <p align="center">

        <div id="nav_arrow">
        <a href="index.html"><img src="images/icons/arrow_left.png" width="60" height="44"></a>
            <img src="images/spacer-10px.png"></div>

        <a href="index.html"><img src="images/icons/home_75x75.png" alt="" title="Welcome!"></a>
            <img src="images/spacer-10px.png">

        <a href="national_presence.html"><img src="images/icons/locations_75x75.png" alt="" title="Our Locations!"></a>
            <img src="images/spacer-10px.png">

        <a href="accreditation.html"><img src="images/icons/accreditation_75x75.png" alt="" title="Our Accreditation!"></a>
            <img src="images/spacer-10px.png">

        <div id="nav_arrow">
        <a href="accreditation.html"><img src="images/icons/arrow_right.png" width="60" height="44"></a>
            <img src="images/spacer-10px.png"></div>


    </p>

タグを移動し、すべてを 1 つのコンテナーにラップし、doctype を変更しようとしましたが、うまくいきませんでした。

何かご意見は？

4

2 に答える 2

1

犯人は意外な人物です。

img { max-width: 100%;

IE 8 は、画像を使用する他のブラウザーとは異なる動作をmax-widthします。仕様を見る価値があります：

 If the containing block's width depends on this element's width, then the
 resulting layout is undefined in CSS 2.1.

ここではそれが当てはまります。公平を期すために言うと、IE が間違っているわけではありません。

提案された修正

display: inline;
zoom: 1;

は IE < 8 向けのハックです。結果は に似ていdisplay: inline-blockます。max-widthまた、IE 7 互換モードで on images が期待どおりに機能するのは、偶然の一致です。たぶんIE 7でも、わかりません。つまり、このハックで IE 7 のレンダリング モードをトリガーし、それが機能する理由です。

于 2013-07-05T21:00:50.157 に答える