Internet Explorer 8の流体イメージのアンカータグ

Question

Internet Explorer 8で流体レイアウト（最大幅：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の、クロム、サファリ、オペラ、IE7、IE9ではなく、IE8で期待どおり今では働いています。そこでは、アンカーは依然として容器の外側に延びている。がIE8でサポートされるはずですので、私は何をすべきかについて少し困惑しています。

私はアンカーは、その親要素よりも大きいかどうかを検出するためにJavaScriptを使用して、その前提にdisplay: blockにそれを切り替えることができ最後の手段として発行しhttp://jsfiddle.net/3gkXU/22/

を隔離JSFiddleページを持っている

人々はブラウザのサイズを変更することはほとんどありません。私はそれに反対していませんが、ここにはCSSソリューションがありますか？

Answer 1

IE8は、widthの場合はbox-sizing: border-boxを尊重しますが、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; 
}