Как оказалось, CSS3 стили не работают в Internet Explorer 8, если они прописаны на странице, которая открывается в iFrame. Вернее они-то работают, но нужно прописать определенные параметры в <meta> тег страницы-родителя.
В общем ситуация была такая:
Есть страница parent.html, у которой прописаны свои стили. Она содержит в себе тег <iFrame> в котором открывается страница child.html (и таких страниц несколько), у которой прописаны свои стили. Целевой браузер - IE8 (так нужно заказчику).
И пока я верстал эти страницы, используя все прелести CSS3, они прекрасно отображались и в Firefox и в IE8. Но когда все это собралось в одно целое и дочерние страницы начали отображаться через iFrame оказалось, что такие стили как border-radius, box-shadow, селектор типа input[type="checkbox"] + label::before не срабатывают.
Перечитав около десятка форумов и перепробовав всяческие советы по этому поводу (клеить стили к дочерней странице с помощью jQuery в коде самой дочерней страницы и коде родительской страницы, прописывать стили непосредственно в теле страницы в теге <style> и т.п.) я наконец-то наткнулся на простое решение этой проблемы.
Итак, чтобы CSS3 стили нормально отображались на странице, которая отображается через iFrame на родительской странице нужно на родительской странице прописать такой тег:
В общем ситуация была такая:
Есть страница parent.html, у которой прописаны свои стили. Она содержит в себе тег <iFrame> в котором открывается страница child.html (и таких страниц несколько), у которой прописаны свои стили. Целевой браузер - IE8 (так нужно заказчику).
И пока я верстал эти страницы, используя все прелести CSS3, они прекрасно отображались и в Firefox и в IE8. Но когда все это собралось в одно целое и дочерние страницы начали отображаться через iFrame оказалось, что такие стили как border-radius, box-shadow, селектор типа input[type="checkbox"] + label::before не срабатывают.
Перечитав около десятка форумов и перепробовав всяческие советы по этому поводу (клеить стили к дочерней странице с помощью jQuery в коде самой дочерней страницы и коде родительской страницы, прописывать стили непосредственно в теле страницы в теге <style> и т.п.) я наконец-то наткнулся на простое решение этой проблемы.
Итак, чтобы CSS3 стили нормально отображались на странице, которая отображается через iFrame на родительской странице нужно на родительской странице прописать такой тег:
<head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=IE8, charset=UTF-8"> ... </head>Что это значит я пока особо не разбирался, но работает - и хорошо. Пока я понял, что таким образом мы задаем правило обработки стилей родительской страницы и от этого правила зависит и обработка стилей ее дочерних страниц, отображаемых через iFrame. Как только будет лишнее время - обязательно разберусь и напишу.
Комментариев нет:
Отправить комментарий