Исправление таблицы стилей для IE 7 8 9

Question

Я не уверен, допустимо ли спрашивать такого рода вещи, но так как я понятия не имею, как ее решить:

Я создал макет HTML5 CSS3 с нуля, и он выглядит именно так, как я хочу вFirefox 5, Safari 5.1 и Chrome 12 для Mac.
Но когда я использую https://browserlab.adobe.com/ для тех же браузеров, он выглядит немного ломаным (нижний колонтитул посередине, повторение фона, видимые подменю).Это заставило меня задуматься, могу ли я доверять инструменту Adobe или нет.

Тогда, когда я использую browserlab или http://ipinfo.info/netrenderer/, чтобы просмотреть его в IE, он полностью сломан (что и следовало ожидать).
• ВВ IE9 радиальный фон отсутствует, меню не стилизованы, не повернуты и не повернуты в крайнее правое положение, основное содержимое отображается под боковой панелью, а его ширина не учитывается (странно, потому что в более старой версии моего макета он отлично отображался в IE9)
• В IE8 иногда бывает то же самое, когда список боковых панелей занимает все пространство, иногда это просто черная страница.
• Если в IE7 это не черная или белая страница, это хуже, чем в IE8 с основным контентом.быть нечитаемым.

Я использую два JS, один, который исправляет многие проблемы IE, а другой - поддержку тегов HTML5, но они, кажется, конфликтуют или, по крайней мере, отвечают за черные страницы.

Я действительно надеюсь, что это на самом деле хорошо отображается в Mozilla и WebKit.Меня беспокоит IE, потому что я понятия не имею, как это исправить, и 13% моих посетителей используют его (немаловажно).

Я был бы очень признателен за любую помощь, так как это мешает мне запустить сайт (которая уже просрочена)

Answer 1

Во-первых, как уже говорили другие, кажется, что html5shiv не работает для вас должным образом. У меня была такая же проблема с html5shiv, и я никогда не мог понять, почему, но я обнаружил, что замена его на Modernizr сделала свое дело (Modernizr включает ту же функциональность плюс кучу других полезных вещей; см. Их сайт для получения дополнительной информации) .

Это вполне может решить многие проблемы.

Такие вещи, как радиальный фон, и border-radius на вкладках можно исправить с помощью CSS3Pie .

Вы используете transparent в своих таблицах стилей. Я уверен, что это не поддерживается, по крайней мере, в IE7 (не уверен насчет IE8?). В IE есть несколько обходных путей для поддержки подобных вещей, но ни один из них не особенно хорош.

Положение ваших повернутых меню неправильное из-за различий в том, как IE вращает элементы по сравнению с другими браузерами. В стиле фильтра IE для поворота используется другая точка происхождения: он вращается вокруг верхнего левого угла, тогда как браузеры, совместимые с CSS3, по умолчанию вращаются вокруг центральной точки.

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

Вы используете селекторы CSS, как это:

.ul_nav_main li a:not(:last-child):after

Это не сработает в IE8. Ни :not, ни :last-child не поддерживаются в IE8 или более ранних версиях, а :after не поддерживается в IE7. Вы также используете некоторые сложные селекторы атрибутов, которые также не будут работать в старых IE.

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

Надеюсь, это поможет.