IE 和 HTML5 文档类型问题答案

【问题标题】：IE and HTML5 doctype issuesIE 和 HTML5 文档类型问题
【发布时间】：2012-02-13 18:04:51
【问题描述】：

我正在使用出色的 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">

我遇到各种渲染问题：按边距居中：auto 不起作用，高度、宽度、martings 和 paddings 都表现得像疯了一样，我所有的布局都被 <!doctype> 破坏了，但如果我切换到旧的一，一切都很好（嗯，不是很好，它仍然是 IE，但正如预期的那样）

HTML5 Boilerplate 带有 Modernizer，我认为它应该可以解决这个问题，但它不起作用。从我的“研究”（谷歌）中我发现 IE 进入了 quirks mode width <!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">

【问题讨论】：

这个问题的解决方案是什么？

标签： html internet-explorer html5boilerplate

【解决方案1】：

IE 不会使用该文档类型进入怪癖模式。样板文件应该修复 IE 问题，而不是导致它们。您在 doctype 之后缺少 <html> 元素。添加它以查看情况是否发生变化。 HTML5 不需要它，但如果缺少它，根据文档，IE 或样板文件可能会变得疯狂。

另外，只需删除 doctype 后的 cmets，问题就会消失。

【讨论】：

我没有错过它，样板有它：
@Juan - 然后我们需要查看完整的标记，因为我们只是在猜测。
这个答案的实际解决方案是什么？
删除 html 的注释版本并保留纯

【解决方案2】：

试着把它放在<head></head> 标签中：

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

如果它已经存在，请将其删除，您可能会收到您想要的结果。

【讨论】：

它在那里，我删除了它但没有任何改变

【解决方案3】：

IE 不会对 HTML doctype 产生怪癖 - 这就是重点！

这个新的 DOCTYPE 的特别之处在于，所有当前浏览器（IE、FF、Opera、Safari）会查看它并切换内容进入标准模式——即使他们没有实现 HTML5。这意味着您可以开始使用 HTML5 编写网页今天，让它们持续非常非常长的时间。

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

但是，在 doctype 之前有任何东西（换行符、cmets 等）都会。

我会检查你在做什么 - HTML5 doctype 不会让你的浏览器出现怪癖。

【讨论】：

【解决方案4】：

尝试将文件另存为 UTF-8 without BOM。它帮助了我。

【讨论】：

这对我有帮助，在 doctype 声明之前写了一些东西，而 IE edge 假设我没有 doctype，从而极大地弄乱了最终结果。

【解决方案5】：

我不是一个“奇才”，但是像这样为 IE8 及以下版本声明一个 HTML 4.01 文档类型是不是不行：

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

【讨论】：

您的评论确实使 IE 进入了怪癖模式。你不能在文档类型前面放任何东西。

【解决方案6】：

它可能会进入与条件 cmets 的兼容模式。我们建议您在 .htaccess 文件或其他服务器配置文件中设置 x-ua-compatible 标头服务器端。

【讨论】：

【解决方案7】：

我认为您发布的 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 条件 cmets，我在 IE9、IE8 和 IE7 上进行了测试，大写和小写 doctype，只是为了仔细检查。

我在 IE7 上观察到的唯一奇怪的事情是，当我使用 <!doctype html> 而不是 @987654332 时，webfonts（我的应用程序中的所有四个）有时会无法呈现@。

仅供参考：我刚刚检查并看到 HTML5 Boilerplate Project 在 2013 年 9 月 24 日具有 removed support for IE conditional comments。我无法确认何时将条件 cmets 引入项目，但可以在 2010 年 1 月 24 日看到 it used to be around the body tag when the project was ported to Github .

【讨论】：

【解决方案8】：

尝试使用 DOCTYPE html 而不是 doctype html doctype 标签区分大小写，这就是原因。

【讨论】：