Max-width на теге <img>, не работающем в IE8

У меня странная проблема. На сайте, который в настоящее время строился, у нас есть функция галереи через плагин jQuery, Gallerific. Галерея открывается в модальном окне. Мне нужно установить максимальную ширину изображений до 765px. Поэтому я установил max-width: 765px; в моем CSS. Я знаю, что не работаю в IE6, но мне все равно.

Странно то, что когда я использую изображение, например. 1400px в ширину, IE8 в режиме совместимости, Firefox, Chrome, Safari и Opera, все масштабирует это изображение до 765 пикселей по ширине, но не IE8! Я не могу понять, почему это не работает.

Кто-нибудь знает, что происходит, или как еще лучше, как его исправить?

Ваши ответы очень ценятся - Спасибо!

С уважением, Ким

Ответы

Ответ 1

IE8 требует, чтобы контейнер был помещен вокруг изображения, при этом ширина была либо максимальной, либо необходимой, либо равной 100% ширине (кажется, лучше работает на абсолютно позиционированных div). IE8 кажется счастливым, если в этом контейнере определена ширина.

В вашем примере вы можете установить div контейнера максимальной ширины, которую вы ищете, при установке свойства max-width всех изображений на 100%:

.container { width: 765px;}
img { max-width: 100%;}

который заставляет изображения быть не более, чем ширина контейнера, в котором они находятся.

Убедитесь, что вы объявляете документ HTML5; IE не любит доктрины XHTML.

С уважением, Ларри

Ответ 2

Вы столкнулись с IE8 "Почти режим стандартов" (который предназначен для разбивки так же, как IE7). Добавление метатега:

<meta http-equiv="X-UA-Compatible" content="IE=8">

или реальное поле заголовка HTTP с одинаковыми значениями должно привести вас в правильный режим стандартов. Обратите внимание, что метатег должен отображаться перед любыми script или элементами стиля для правильной работы.

Ответ 3

Я столкнулся с подобной проблемой, контейнерное решение не работает, если у вас есть изображения разных размеров, если изображение мало, это оставляет много места на стороне изображения. По-видимому, max-height отлично работает в IE8, я бы рекомендовал использовать это, если вы можете.

Ответ 4

Как объяснено в других ответах, вам необходимо применить ширину к контейнеру для решения этой проблемы в IE8. Для Galleriffic конкретного решения вы можете добавить css, похожее на это:

a.thumb img 
{
    max-width: 160px; 
}

/* IE 8 specific bug */
a.thumb
{
    width: 160px; 
}

Ответ 5

Эй, одна вещь, которую вы, возможно, захотите попробовать (которая заставила меня ударить головой о стену), поэтому убедитесь, что ваш doctype настроен правильно.

IE8 работает с версией HTML5, но если в нижнем регистре это не так.

http://www.kintek.com.au/blog/ie8-max-width-max-height-and-inline-ie8-css-hacks/

Кроме того, вы можете использовать встроенные хаки CSS, которые будут использоваться для определенных платформ:

ширина: 200px\9;/* ie8 и ранее/ высота: 200px\9;/ie8 и ранее */

Ответ 6

Я столкнулся с чем-то похожим на IE 8 и 9 и обнаружил, что у меня другая проблема в моем коде, который стоит упомянуть.

У меня был div с шириной 100%, затем div, максимальная ширина которого составляла 980px.

По какой-то причине максимальная ширина не была видна, и элемент внутри этого 980 div, который должен был плавать вправо, не был.

Я запустил страницу с помощью w3-кода для проверки кода, и он поймал комментарий, который был до объявления doctype, и сказал, что IE будет в режиме "quirks".

Как только я переместил это объявление ниже декларации doctype, предупреждение режима ожидания "quirks" исчезло, и все было хорошо в IE 8 и 9.

Ответ 7

Возможно, Gallerific применяет максимальную ширину на лету? Вы пробовали с помощью !important?