Кросс-браузерное исправление для IE9 - PullRequest
Новая
       17

Кросс-браузерное исправление для IE9

0 голосов
/ 05 октября 2011

У меня есть сайт, который в настоящее время хранится на http://www.robmyrick.com. Это очень простой html / css-сайт, без каких-либо сложных функций. Я провел значительное количество исследований о том, как настроить страницы так, чтобы они менялись в зависимости от разрешения экрана и между браузерами.

Конкретные проблемы:

  1. Изображение заголовка отображается некорректно между IE8, IE9 и Safari.

  2. Пули на главной странице в разделе «Максимизировать денежный поток» отображаются правильно и неправильно, в зависимости от браузера.

  3. Разделенные фоны на странице отображаются правильно и неправильно, в зависимости от браузера.

Я знаю, что веб-страницы могут работать лучше, даже в среде с несколькими браузерами. Что я делаю не так ???

Любая помощь будет очень полезна при соблюдении некоторых общих правил.

Ответы [ 3 ]

1 голос
/ 05 октября 2011

Проверьте ваш HTML для этого списка ошибок, которые необходимо исправить.

0 голосов
/ 16 января 2014

IE9, как утверждают, является значительно улучшенным / совместимым со стандартом продуктом от Microsoft, и, кстати, IE9 не в полной мере существует, и, прежде всего, использование взломов браузеров вообще не является хорошей практикой.Существуют и другие решения, такие как сброс CSS, условные комментарии IE и т. Д., Которые вы можете использовать.34 голос против

Я предпочитаю метод Пола Ирриша:

Прикрепите это вместо открывающего тега: 

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

И используйте его так: 

.foo { color: black; } /* Awesome browsers */
.ie8 .foo { color: green; } /* IE8 */
.ie7 .foo { color: blue; } /* IE7 */
.ie6 .foo { color: red; } /* IE6- */

Это действительно оригинальный способ сделать CSS-стилизацию под IE.Но, как уже упоминалось, будьте осторожны, чтобы не переусердствовать с обнаружением браузера.:) 

IE6 - IE10pp4 hacks

No IE9 or IE10pp4 specific hacks have been found.

#element {
    color:black;
}
#element {
    *color: blue;    /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
    _color: red;     /* IE6 */
}
#element {
    color: green \0/; /* IE8+9  */
}
@media all and (min-width:0) {
    #element { color:pink \0/; }  /* IE9-IE10pp4 */
}

ТРЕБУЕТСЯ пробел перед \ 0 /, если только вы не хотите сопоставлять Opera.

0 голосов
/ 05 октября 2011

1) Изображение заголовка неправильно отображается между IE8, IE9 и Safari.

В Safari я не вижу, в чем проблема с изображением заголовка. Вам придется определить, что вы подразумеваете под «неправильно отображает» .

2) Пули на главной странице в разделе «Максимизировать денежный поток» отображаются как правильно и неправильно, в зависимости от браузера.

Неудивительно, что у вас есть некоторые проблемы с макетом. Все ваши неразрывные пробелы пропускают ;. Предполагается, что они будут &nbsp;, где вместо этого вы постоянно используете &nbsp. Если вы полагаетесь на неразрывные пробелы для макета, есть большая вероятность, что браузеры их игнорируют.

Я нахожусь в Safari и не вижу никаких маркеров в разделе «Максимизировать денежный поток», я вижу только визуализированный текст вместе с «& nbsp». Пример: "Мы предоставляем собственные услуги ..."

Даже если вы исправите неразрывные пробелы, я все еще не вижу, как это превращает это в маркированный список. Там вообще нет тегов <ul> или <li>.

3) Разделенные фоны на странице отображаются правильно и неправильно, в зависимости от браузера.

Вы используете один и тот же идентификатор дважды: #backgroundmiddle. Как правило, браузеры имеют тенденцию игнорировать второй экземпляр с тем же идентификатором. Возможно, это корень проблемы № 3, которую вы описали выше.

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

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

...