максимальная ширина тега <img>не работает в IE8

Question

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

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

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

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

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

Answer 1

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

Для вашего примера вы можете установить для контейнера div максимальную ширину, которую вы ищете, задав при этом свойство max-width всехimages to 100%:

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Я проверил страницу через валидатор кода w3, и он поймал комментарий, который был до объявления doctype, и сказал, что IE будет в режиме «причуд».

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

Answer 4

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

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

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

ширина: 200 пикселей \ 9;/ * ie8 и более ранние / height: 200px \ 9;/ ie8 и более ранние * /

Answer 5

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

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

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

Answer 6

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

Answer 7

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