Рушится верстка в IE 8 и IE9 , IE 10

ishurgaya · 16.01.2015

Здравствуйте.
Есть сайт ---.ru

Валится верстка в IE 8 и IE9 , IE 10.

Помогите понять какие стили валятся и на что можно и заменить для эксплореров.

Заметил что валятся display:inline-block в меню и в списках товаров.( пробовал заменять на *zoom:1;*display:inline; ,но что то не помогает)

Так же margin:0 auto не работает в эксплорерах.

Какие еще стили нужно подправить для эксплореров ? и не могу понят почему все валиться на левую сторону это валиться ширина или центрирование не работает для ie?

Заранее спасибо.

BaNru · 16.01.2015

1) В Фоксе и Хроме тоже неправильно работает, шрифты похоже не проходят или смотри третий пункт, в две строки меню

2) В IE 11, в режиме эмуляции IE 10 и 9 - всё нормально с меню. А вот в режиме эмуляции IE 8 проблема, как и в Фоксе с Хромом в две строки.
А вот в настоящем IE 8 вообще беда с версткой http://joxi.ru/V2Vn8lQhGdvY2v
Я бы рекомендовал использовать ie9.js, решится 99% проблем.

3) Когда верстаешь через inline-block стоит помнить о пробелах между тегами, они тоже учитываются
http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html
Есть ещё много материала на эту тему.

ishurgaya · 17.01.2015

BaNru сказал(а):
1) В Фоксе и Хроме тоже неправильно работает, шрифты похоже не проходят или смотри третий пункт, в две строки меню

это в какой версии Фокса и Хрома?
заметил ,что не работают медиа запросы в ie8 .
При любой ширине экрана ,почему то выставляется ширина слайдера 940px и для некоторых других блоков выстравляется ширина как для небольшого экрана.

хотя подключен js для понимания медиа запросов эксплорерами:
<script src="http://css3-mediaque...s.js"></script>
толку особого нет.

для понимания html5 подключены html5sliv ,тоже ничего не изменили.

BaNru · 17.01.2015

Фокс 34 и Хром 39 (линукс).

Для Ие8 надо делать graceful degradation, не имеет смысла пытаться добиться от него adaptive (responsive) design, всё равно этим ни кто не воспользуется. У кого ИЕ8-9 - разрешение экрана от 1024x768 до FullHD, поэтому достаточно рассчитать 1024x768.

Поэтому я предлагал Ie9.js и не мучиться.

ishurgaya · 17.01.2015

BaNru сказал(а):
Фокс 34 и Хром 39 (линукс).

Для Ие8 надо делать graceful degradation, не имеет смысла пытаться добиться от него adaptive (responsive) design, всё равно этим ни кто не воспользуется. У кого ИЕ8-9 - разрешение экрана от 1024x768 до FullHD, поэтому достаточно рассчитать 1024x768.

Поэтому я предлагал Ie9.js и не мучиться.

забыл написать,что подключил Ie9.js и Ie8.js. все так же.

Похоже что то блокирует загрузку стилей и js для эксплореров таких как Ie9.js, html5sliv,css3-mediaqueries.js.

Сохранил исходный код страницы в html файл, открыл его в ie8 и вот:

В принципе нормально(по сравнению с тем что на сайте творится), а вот на сайте все также валиться в ноль.

либо какие то js или php скрипты блокируют загрузку стилей.

Я скоро так с ума сойду.) Помогите)

BaNru · 17.01.2015

В Фоксе и Хроме именно также выглядит меню. То есть проблема всё таки в верстке, а не браузере.
Хотя у меня в Ie8 картина печальнее была, я показывал выше.

Ради любопытства почитай статью по третьему пункту (то что выше писал).

Может я не так понял проблему? Зачем сохранять HTML код, почему просто не открыть сайт в IE8?!
Объясни подробнее проблемы по пунктам, можно со скринами.

1) Прогони через валидатор и попробуй исправить максимальное число HTML ошибок. Проще будет дальше искать проблемы

2) Я не работал с css3-mediaqueries.js и не знаю для него или нет ты вот это писал:



 <html class="not-ie no-js" dir="ltr" lang="ru"> 
Но тут же явно написано "no-js". Может в этом проблема?

3) Библиотеки могут конфликтовать. html5sliv не нужен при ie9.js

4)



Зачем дважды подключать? Убери первое подключение.

You do not need to include IE7/IE8.js if you are using IE9.js

5) Отключи, пока решаешь проблему, всё что можно лишнее, например метрику и тот десяток скриптов в хедере не относящихся с верстке. Когда всё решится - подключишь обратно.

ishurgaya · 18.01.2015

по третьему пункту, это понятно. это я сделаю.

а насчет этого:

Зачем сохранять HTML код, почему просто не открыть сайт в IE8?!

Это я к тому ,что если перейти на сайт в ie 8 ,то он выглядит так:

А если сохранить исходный код страницы (подключив все стили и скрипты) ,то сайт в ie8 выглядит так:

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

BaNru · 18.01.2015

Ну значит выполни пятый пункт. Можно на отдельной странице на хостинге (желательно этом же домене)
Может быть можно попробовать и скаченный файл выложить и посмотреть что изменится.

Как отключишь всё лишнее - возвращайся и говори где эта страница облегченная.

ishurgaya · 18.01.2015

BaNru сказал(а):
Ну значит выполни пятый пункт. Можно на отдельной странице на хостинге (желательно этом же домене)
Может быть можно попробовать и скаченный файл выложить и посмотреть что изменится.

Как отключишь всё лишнее - возвращайся и говори где эта страница облегченная.

ну это просто opencart . попробую на резервной копии, из шаблона header.tpl убрать лишнии скрипты.

ishurgaya · 18.01.2015

BaNru сказал(а):
Ну значит выполни пятый пункт. Можно на отдельной странице на хостинге (желательно этом же домене)
Может быть можно попробовать и скаченный файл выложить и посмотреть что изменится.

Как отключишь всё лишнее - возвращайся и говори где эта страница облегченная.

пробовал и все джава скрипты удалять и стили ,поочередно и все вместе.
Пробовал переносить все стили и скрипты в футер ,в лучшую сторону не изменилось.

вот страничка с исходным кодом страницы,взятом с ie:

---.ru/tpl.html

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

BaNru · 19.01.2015

У тебя проблема с режимом совместимости
http://htmlbook.ru/samlayout/rezhimy-brauzerov/rezhimy-internet-explorer
У тебя стоит

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Но не срабатывает похоже. Я обычно вообще не прописываю подобное (эту строку) и проблем ни разу не было.

Если в Ишаке выставить вручную IE8, то отображается лучше чем в других
http://joxi.ru/p278XGMFZE1ZA7

Можешь погуглить ещё по запросу "Режимы совместимости Internet Explorer"

PS Не забывай, что другие браузеры у тебя отображают так же, как и на скрине

ishurgaya · 19.01.2015

поигрался с разными значениями <meta http-equiv="X-UA-Compatible" content="IE=edge">, но ничего не менялось ,что на html странице, что на оригинальном сайте.
Поэтому удалил вообще и на html странице и на оригинальном сайте.(ничего не изменилось вообще) .
Дело в чем то другом.

BaNru · 19.01.2015

Валидатор ругается

Error Line 1, Column 1: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.

_<!DOCTYPE html>

Помню несколько раз сталкивался с приколом "болезнь нулевого байта", из-за которого творятся чудеса чудесатые. Может у тебя эта проблема?

Попробуй сделать следующее.
Удали файл с которого начинается header, в котором написано <!DOCTYPE html> (скопируй куда нибудь, а не удаляй).
Затем создай новый пустой файл, выстави в нем необходимую кодировку (UTF-8 без BOM).
Напиши ручками первый символ "<", остальное всё скопируй и вставь из старого файла.

Этот "нулевого байт" бывало шутки подкидывал не детские, поэтому надо попробовать.

ishurgaya · 19.01.2015

похоже вы правы)

Нашел его в графическом отображении :

Это коротеньная черточка перед <!DOCTYPE html>, которую невозможно удалить.

Единственный вариант это скопировать весь код в другой файл без этой черточки.

Рушится верстка в IE 8 и IE9 , IE 10

ishurgaya

Member

BaNru

Пацифизжу

ishurgaya

Member

BaNru

Пацифизжу

ishurgaya

Member

BaNru

Пацифизжу

ishurgaya

Member

BaNru

Пацифизжу

ishurgaya

Member

ishurgaya

Member

BaNru

Пацифизжу

ishurgaya

Member

BaNru

Пацифизжу

ishurgaya

Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей