2

Internet Explorer 8 の可変レイアウト (max-width:100% を使用する画像) に問題があります。可変幅の画像と余白、パディング、および境界線の周りにアンカー タグをラップしたいときに問題が発生します。参加してください。これはあなたが思っているよりも少し難しいです。

したがって、HTML はおおよそ次のようになります。

<div>
    <a class="image-wrap" href="#">
        <img alt="something" src="/path_to_image.jpg">
    </a>
</div>

そしてスタイリング：

img { 
    max-width: 100%;
    display: block;    
}

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: block;
}

私が持っているのは、パディングと境界線のあるアンカーに囲まれた流動的な画像です。

イメージがコンテナよりも小さい場合を除き、上記で問題ありません。その場合、アンカーのパディングと境界線はイメージを超えて拡張されます (コンテナの全幅を埋めます)。

それでは、アンカーをそのコンテンツに合わせて強制する何かを試してみましょう。

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
}

OK、アンカー ボックスは画像よりも大きくなりませんが、Firefox、Opera、および IE8+ ではアンカー タグが柔軟ではなくなりました。ただし、IE7 ではレイアウトがトリガーされるため、処理されます。次は：

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
    max-width: 100%;
}

アンカーは再び柔軟になりましたが、画像の縮小が始まるとコンテナよりも 12 ピクセル大きくなります。アンカーは画像に基づいて幅を計算し、境界線とパディングを追加します。何らかの理由で、Chrome と Safari はこれを行いません。とにかく、救助のための代替ボックスモデル：

.image-wrap {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
    max-width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

現在、Firefox、Chrome、Safari、Opera、IE7、IE9 では期待どおりに動作していますが、何らかの理由で IE8 では動作していません。そこでは、アンカーはまだコンテナの外側に伸びています。box-sizing: border-boxIE8でサポートされているはずなので、どうすればいいのか少し困惑しています。

問題を切り分ける JSFiddle ページがありますhttp://jsfiddle.net/3gkXU/22/

最後の手段として、JavaScript を使用してアンカーがその親要素よりも大きいかどうかを検出しdisplay: block、人々がブラウザーのサイズを変更する可能性が低いと仮定してアンカーに切り替えることができます。私はそれに反対しているわけではありませんが、ここに CSS ソリューションはありますか?

4

1 に答える 1

2

IE8 は を尊重しているようですが、 は尊重box-sizing: border-boxしてwidthいないようですmax-width。解決策: 忘れてbox-sizing余分な要素を挿入します。

jsFiddle: http://jsfiddle.net/wdKGU/1/

新しい HTML:

<div>
    <a class="image-wrap" href="#">
        <span>
            <img alt="something" src="/path_to_image.jpg">
        </span>
    </a>
</div>

新しいスタイリング:

img {
    max-width: 100% !important;
    display: block;
}

.image-wrap {
    display: inline-block;
    max-width: 100%;
}

.image-wrap span {
    padding: 5px;
    border: 1px solid black;
    display: block;
}
于 2012-01-16T08:36:21.690 に答える