Internet Explorer 8中的流體圖像周圍的錨定標記

Question

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%; 
} 

現在錨靈活了，但在圖像開始縮小它的12px的比容器大。錨點根據圖像計算寬度，然後添加邊框和填充。出於某種原因，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; 
} 

現在它正按預期在火狐，Chrome，Safari瀏覽器，歌劇，IE7，IE9，但不是IE8的某些原因。在那裏，錨仍然延伸到容器外部。我有點難以理解該怎麼做，因爲box-sizing: border-box應該在IE8中支持。

我已經得到了隔離問題http://jsfiddle.net/3gkXU/22/

作爲最後一招，我可以使用JavaScript來檢測是否錨比它的父元素做大，然後再切換到display: block假設一個的jsfiddle頁人們不太可能調整瀏覽器大小。我並不反對，但是這裏有一個CSS解決方案嗎？

Answer 1

看來，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; 
}