Проблемы с типом документа IE и HTML5 - PullRequest
Новая
       12

Проблемы с типом документа IE и HTML5

13 голосов
/ 13 февраля 2012

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

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

<!doctype html>
<head>

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

<!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 поставляется с Modernizer, который, я думаю, должен это исправить, но он не работает. Из моего «исследования» (Google) я обнаружил, что IE входит в режим причуд шириной <!doctype>, поэтому вопрос ...

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

Или, по крайней мере, не нарушать поля, ширину, отступы и т. Д.?

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

<!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">

Ответы [ 8 ]

16 голосов
/ 13 февраля 2012

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

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

9 голосов
/ 13 февраля 2012

Попробуйте добавить это в тег <head></head>: 

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

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

7 голосов
/ 13 февраля 2012

IE не суетится с HTML-типом документа - в этом весь смысл!

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

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

Однако, имея что-либо до типа документа (новые строки, комментарии и т. д.) будут.

Я бы проверил, что вы делаете - доктайп HTML5 не приведет ваш браузер в замешательство.

1 голос
/ 17 октября 2014

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

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

Я не вижу ничего плохого в разметке full head , которую вы разместили.Это стандартная разметка, широко используемая в шаблонах, которые включают 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, это то, что веб-шрифты (все четыре в моем приложении) иногда не отображались, когда я использовал <!doctype html> вместо <!DOCTYPE html>.

К вашему сведению: я только что проверил и вижу, что HTML5 Boilerplate Project имеет удаленную поддержкудля условных комментариев IE 24 сентября 2013 года. Я не могу подтвердить, когда в проект были введены условные комментарии, но вижу, что раньше он был вокруг тега body, когда проект был портирован на Github 24 января 2010 года.

0 голосов
/ 01 марта 2013

попробуйте использовать DOCTYPE html вместо doctype html В теге doctype учитывается регистр символов, это может быть причиной.

0 голосов
/ 16 февраля 2012

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

0 голосов
/ 13 февраля 2012

Я не слишком большой "волшебник", но разве не получится сделать условный HTML и объявить HTML401-тип документа для 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]-->

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

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