Прикрепите тег вокруг плавного изображения в Internet Explorer 8 - PullRequest
Новая
       23

Прикрепите тег вокруг плавного изображения в Internet Explorer 8

2 голосов
/ 19 июля 2011

У меня возникли проблемы с плавным макетом (с изображениями, использующими максимальную ширину: 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?

1 Ответ

2 голосов
/ 16 января 2012

Похоже, что 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;
}
...