Проблемы с IE и HTML5 doctype

Я использую большой шаблон HTML5. Это отличный проект, но у меня есть некоторые большие проблемы с рендерингом в IE 8 и 7 (Возможно, 8, но еще не пробовали)

файлы имеют тип документа HTML5:

<!doctype html>
<head>

но проблема в том, что нет полного и уродливого типа doctype...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Я получаю все виды проблем рендеринга: центрирование по марже:авто не работает, высоты, ширины, мартинги и прокладки ведут себя как сумасшедшие, и весь мой макет сломан с просто <!doctype> но если я переключусь на старый, все работает отлично (ну, не здорово, это все еще IE, но, как и ожидалось)

HTML5 Boilerplate поставляется с модернизатором, который, я думаю, должен исправить это, но он не работает. Из моего "исследования" (Google) я обнаружил, что IE входит в режим quirks width <!doctype>, Так что вопрос в том...

есть ли способ предотвратить переход IE в режим причуд с <!doctype>?

или по крайней мере не нарушать ширину полей, прокладки и т. д.?

Edit: это полная головка:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
13
html5 html5boilerplate internet-explorer

8 ответов

IE не переходит в режим причуд с этим doctype. Шаблон должен исправлять проблемы IE, а не вызывать их. Вы пропускаете <html> элемент после параметра "DOCTYPE". Добавьте это, чтобы увидеть, если все изменится. HTML5 не требует этого, но, если отсутствует, IE или boilerplate могут сойти с ума в соответствии с документами.

кроме того, просто удалите комментарии после doctype, и это должно устранить проблему.

16

Попробуйте поместить это в <head></head> tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

если он уже есть, удалите его, и вы можете получить желаемые результаты.

7

IE не входит в причуды с помощью HTML doctype-в этом весь смысл!

что хорошо в этом новом DOCTYPE, особенно, это все текущие браузеры (IE, FF, Opera, Safari) будут смотреть на него и переключать контент в режиме стандартов-даже если они не реализуют HTML5. Это означает, что вы можете начать писать свои веб-страницы с помощью HTML5 сегодня и они продлятся очень, очень долго время.

(http://ejohn.org/blog/html5-doctype/)

, имея перед декларацию DOCTYPE (переводы строк, комментарии и т. д.).

Я бы проверил, что вы делаете-HTML5 doctype не помещает Ваш браузер в причуды.

7

попробуйте сохранить файл как UTF-8 без BOM. Это помогло мне.

1

Я не слишком много "wiz", но не будет ли это работать, чтобы сделать условный html и объявить HTML 4.01 doctype для IE8 и ниже, как это:

<!-- HTML 5 doctype -->
<!doctype html>

<!-- HTML 4.01 Doctype -->
<!--[if lte IE 8]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<![endif]-->

Если это не работает в старых браузерах (из-за браузера, читающего два doctypes), вы можете попробовать следующее:

<!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<![endif]-->>
0

вероятно, он переходит в режим совместимости с условными комментариями. Мы рекомендуем установить x-ua-compatible сторона сервера заголовка в a .файл htaccess или другие файлы конфигурации сервера.

0

Я не вижу ничего плохого с полная голова разметки вы выложили. Это стандартная разметка, широко используемая в boilerplates, которые включают Modernizr, отличная библиотека JavaScript, используемая для обнаружения функций браузера.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

я использую его в своем текущем приложении и не получаю никаких проблем в любом браузере. Хотя я использую его так:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>

для тестирования условных комментариев IE, я тестировал на IE9, IE8 и IE7, С верхний и Нижний регистры doctype, просто для перепроверки.

единственная странная вещь, которую я заметила на IE7 было ли, что webfonts (все четыре в моем приложении) не будут отображаться иногда, когда я использовал <!doctype html> вместо <!DOCTYPE html>.

FYI: я только что проверил и вижу, что HTML5 шаблонный проект и удалена поддержка условных комментариев IE на 24-го сентября 2013. Я не могу подтвердить, когда условные комментарии были введены в проект, но можно видеть, что это было вокруг тега тела, когда проект был портирован на Github 24 января 2010 года.

0

попробовать тега DOCTYPE HTML вместо тега DOCTYPE в HTML тег doctype чувствителен к регистру, это было бы причиной.

-4