Изображения, не отображающиеся в IE с использованием адаптивного дизайна

Question

Итак, у меня есть сайт (см. this page - он уже в прямом эфире, но за ближайшей крышкой), с двумя сопровождающими его стилями: один для обычных стилей (style.css) и один для стиля, который применяется только к определенному с (width.css - или, другими словами: отзывчивому дизайну). Этот лист гарантирует, что некоторые фотографии не отображаются при меньших размерах экрана, но они отображаются на больших экранах.

По крайней мере, это то, что он должен делать, и он делает это отлично в Chrome и Firefox, но это не в IE (версия 11). Инструменты разработчика IE показывают, что вычисленные свойства для моих изображений отображаются: none и display: inital (который я использовал в большинстве случаев) вычеркнуто, несмотря на то, что отображение: inital находится в минимальной ширине: 700 пикселей/мин-ширина: 900px часть.

Есть ли кто-нибудь, кто может мне помочь? Если вам нужно больше ресурсов/кода, я буду рад предоставить его.

Заранее благодарен!

Answer 1

Значение "initial" не поддерживается IE. Однако вы можете использовать свойство «visibility» вместо display: initial; или другие значения для свойства отображения.

Answer 2

Проще говоря, это не показано, потому что последнее правило, которое оно читает относительно этого изображения, равно display:none, строка 42 на ширине. Причина появления Chrome и FF заключается в том, что он также имеет идентификатор, который имеет более высокую специфичность над классом, который имеет правило display:initial.

Я не знаю, почему IE принимает .overviewphoto как более важный, чем #opgroot, но похоже, что, может быть, только один из них необходим?

Редактировать: как указано Desperados_, initial не поддерживается IE (я действительно думал, что это странно), и, следовательно, IE не может работать с ним и вместо этого отображает none.

Быстрое исправление будет добавлено внутри ie.css: img#opgroot { display:initial!important; }, но я бы рекомендовал против этого.

Сохраняя ваш код как можно более простым, определенно поможет в использовании этих кросс-браузерных ошибок.