1

Я относительный нуб в грациозной деградации и хотел получить несколько советов на сайте, который только что вышел в эфир. Я знаю, что в этот момент макет полностью сломан в IE 8 или ниже, и мне хотелось посмотреть, как много я могу сделать, чтобы все работало без капитального ремонта.Проблемы с совместимостью с Internet Explorer 8

www.unccti.org

В IE 8, к примеру, это выглядит следующим образом:

http://unccti.org/unc-cti-ie8.png

Это должно выглядеть примерно так:

http://unccti.org/unc-cti-modern.png

Основная проблема заключается в том, что контент совершенно неразборчив в старых браузерах, и некоторые пользователи по-настоящему ошибочно полагают, что это как сайт должен был выглядеть, чтобы восприниматься как «стильный». Я включил скрипт для уведомления пользователей, когда их браузер устарел, но я хочу, по крайней мере, посмотреть, могу ли я получить этот мягкий функционал в IE8. Я предполагаю, что 7 - потерянное дело.

То, что я пытался в дополнение, но безрезультатно:

  • normalize.css и
  • HTML5Shiv

Спасибо за вашу помощь.

+3

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

+0

похоже, что вы пытаетесь использовать цвета RGBA или некоторые непрозрачные изображения. Либо используйте PNG с непрозрачностью, запеченной или выглядящей в непрозрачность: filter() для IE – geedew

+0

Спасибо за помощь, всем. Я собираюсь посмотреть на предложения, которые вы мне дали, и посмотреть, что я могу придумать. – nlemmon

ответ

1

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

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

1) Некоторые html5 теги 2) Некоторые CSS3 свойства

Добавить ниже направиться тег вашего сайта;

<!--[if lt IE 8]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

Respond.js Usage

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

<!--[if lt IE 8]> 
     <link href="css/for-ie8-only.css" rel="stylesheet"> 
<![endif]--> 

Последнее, но не менее я рекомендую использовать Modernizer. Если вы используете html5/css3.

Вы можете проверить HTML5 & CSS3 Support (в разных браузерах) на то, что поддерживается в браузере.

Соответствующий вопрос, как ваш ниже.

how to make css3 and html5 compatible website for all browsers including IE7 and later

удачи!

0

Я не уверен в IE7, но я думаю, что вы можете получить приличную поддержку для IE8. Я нашел в своем личном опыте, что большинство проблем с IE8 проистекают из-за отсутствия поддержки некоторых функций CSS.

Я просмотрел ваш сайт и вижу, что вы используете функции CSS, которые не поддерживаются в IE8, например: nth-child.

Вот список поддержки особенность - http://www.standardista.com/css3/css3-selector-browser-support/

Мое решение было добавить конкретные таблицы стилей IE8 и файла JavaScript. Я бы включил их после всех других включенных файлов, поэтому они применяются последними. Тогда я бы переопределил определенные элементы по мере необходимости. Я бы использовал файл javascript для исправления проблем по мере необходимости, которые не могли быть исправлены с помощью CSS-файла.

<!--[if IE 8]> 
    <link rel="stylesheet" href="/css/ie8.css")" type="text/css" media="screen"> 
    <script type="text/javascript" src="/js/ie8.js")"></script> 
<![endif]--> 
+0

Знаете, теперь, когда я думаю об этом, я считаю, что проблема, вероятно, связана с использованием «max-width». Это CSS3, верно? – nlemmon

+1

@nlemmon ['max-width'] (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) на самом деле является CSS 2.1. IE8 и ниже просто спорадическая поддержка CSS2. Большая таблица того, что поддерживается на http://caniuse.com/ – SlightlyCuban

Смежные вопросы