Якорная метка вокруг жидкостного изображения в Internet Explorer 8

Question

У меня возникли проблемы с жидкостной компоновкой (с изображениями с использованием max-width: 100%) в Internet Explorer 8. Проблема возникает, когда я хочу обернуть якорный тег вокруг изображение с гибкой шириной и полями, заполнением и границами. Это немного сложнее, чем вы думаете.

Так 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; 
} 

ОК, теперь коробка якоря не растет больше, чем изображение, но якорь тег обратно, чтобы быть не гибким в 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; 
} 

Теперь он работает, как ожидалось в Firefox, Chrome, Safari, Opera, IE7, IE9, но не IE8 по какой-то причине. Там якорь все еще выходит за пределы контейнера. Я немного зациклен на том, что делать, поскольку box-sizing: border-box предполагается поддерживать в IE8.

У меня есть страница JSFiddle, которая изолирует этот вопрос http://jsfiddle.net/3gkXU/22/

В крайнем случае я мог бы использовать JavaScript, чтобы обнаружить, если якорь больше, чем его родительский элемент, а затем переключить его на display: block на предположении, что люди вряд ли изменят размер своего браузера. Я не против, но есть ли здесь решение для 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; 
}