Html IE 和 HTML5 文档类型问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9265532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE and HTML5 doctype issues
提问by Juan Ignacio
I'm using the great HTML5 boilerplate. It's a great project but I'm having some big issues rendering in IE 8 and 7 (possibly 8 but haven't tried yet)
我正在使用很棒的 HTML5 样板文件。这是一个很棒的项目，但我在 IE 8 和 7（可能是 8，但还没有尝试过）中呈现一些大问题
The files have the HTML5 doctype:
这些文件具有 HTML5 文档类型：
<!doctype html>
<head>
But the problem is that having no full and ugly doctype like...
但问题是没有完整和丑陋的文档类型，比如......
<!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">
I get all kind of rendering issues: centering by margin:auto doesn't work, heights, widths, martings and paddings all behave like crazy and all my layout is broken with just <!doctype>but if I switch to the old one, everything works great (well, not great, it's still IE, but as expected)
我遇到了各种渲染问题：按边距居中：自动不起作用，高度、宽度、马丁和填充都表现得像疯了一样，我的所有布局都被破坏了，<!doctype>但是如果我切换到旧的，一切都很好（好吧，不是很好，它仍然是 IE，但正如预期的那样）
HTML5 Boilerplate comes with Modernizer which I think should fix this but it's not working. From my "research" (Google) I found that IE enters in quirks mode width <!doctype>, so the question is...
HTML5 Boilerplate 带有 Modernizer，我认为应该可以解决这个问题，但它不起作用。从我的“研究”（谷歌）我发现 IE 进入 quirks 模式 width <!doctype>，所以问题是......
Is there a way to prevent IE going into quirks mode with <!doctype>?
有没有办法防止 IE 进入怪癖模式<!doctype>？
Or at least not to break margins, widths, paddings, etc?
或者至少不要打破边距、宽度、填充等？
Edit:This is the full head:
编辑：这是完整的头：
<!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">
回答by Rob
IE does not go into quirks mode with that doctype. The boilerplate should be fixing IE problems, not causing them. You are missing the <html>element after the doctype. Add that to see if things change. HTML5 does not require it but, if missing, either IE or boilerplate may go crazy according to the docs.
IE 不会使用该文档类型进入怪癖模式。样板应该修复 IE 问题，而不是导致它们。您缺少<html>文档类型之后的元素。添加它以查看情况是否发生变化。HTML5 不需要它，但如果缺少，根据文档，IE 或样板可能会发疯。
Also, just remove the comments after the doctype and that should make the problem go away.
此外，只需删除 doctype 之后的注释，这应该会使问题消失。
回答by Downpour046
Try putting this in the <head></head>tag:
尝试将其放在<head></head>标签中：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
If it's already there, then remove it, and you may receive your desired results.
如果它已经存在，请将其删除，您可能会收到所需的结果。
回答by Rich Bradshaw
IE doesn't go into quirks with the HTML doctype - that's the whole point!
IE 不会对 HTML 文档类型产生怪癖 - 这就是重点！
What's nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode - even though they don't implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.
这个新 DOCTYPE 的好处在于，所有当前的浏览器（IE、FF、Opera、Safari）都会查看它并将内容切换到标准模式 - 即使它们没有实现 HTML5。这意味着您可以从今天开始使用 HTML5 编写您的网页，并让它们持续很长时间。
(http://ejohn.org/blog/html5-doctype/)
(http://ejohn.org/blog/html5-doctype/)
However, having anything before the doctype (newlines, comments etc) will.
但是，在文档类型（换行、评论等）之前有任何内容都会。
I'd check what you are doing - the HTML5 doctype will not put your browser into quirks.
我会检查你在做什么 - HTML5 doctype 不会让你的浏览器变得怪异。
回答by Pa?out
Try save file as UTF-8 without BOM. It helped me.
尝试将文件另存为UTF-8 而不使用 BOM。它帮助了我。
回答by Wallace Sidhrée
I see nothing wrong with the full headmarkup you posted. This is a standard markup widely used in boilerplates that include Modernizr, a nifty JavaScript library used to detect browser features.
我认为您发布的完整头部标记没有任何问题。这是一个广泛用于样板文件的标准标记，其中包括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>
I use it in my current app and get no problems on any browser. Though I use it like so:
我在我当前的应用程序中使用它并且在任何浏览器上都没有问题。虽然我像这样使用它：
<!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>
For the sake of testing the IE conditional comments, I tested on IE9, IE8and IE7, with both the uppercase and lowercase doctype, just for double-checking.
为了测试 IE 条件注释，我测试了IE9,IE8和IE7，同时使用大写和小写的doctype，只是为了仔细检查。
The only odd thing I have observed on IE7was that webfonts (all four in my app) would fail to render sometimes, when I used <!doctype html>instead of <!DOCTYPE html>.
我已经观察到的唯一奇怪的IE7是，网络字体（在我的应用程序的所有四个）就会失败有时呈现，当我用<!doctype html>代替<!DOCTYPE html>。
FYI: I've just checked and see that the HTML5 Boilerplate Projecthas removed support for IE conditional commentson Sept 24th 2013. I can't confirm when conditional comments were introduced to the project but can see that it used to be around the body tag when the project was ported to Githubon Jan 24th 2010.
仅供参考：我刚刚检查并看到HTML5 Boilerplate Project已于2013 年 9 月 24 日取消了对 IE 条件注释的支持。我无法确认何时将条件注释引入到该项目中，但可以看到它曾经在主体周围项目于2010 年 1 月 24 日移植到 Github 时的标记。
回答by funkylaundry
I'm not too much of a "wiz", but wouldn't it work to do conditional html and declare an HTML 4.01 doctype for IE8 and below like this:
我不是一个“巫师”，但它不会像这样执行条件 html 并为 IE8 及以下声明 HTML 4.01 doctype：
<!-- 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]-->
If that does not work in older browsers (due to the browser reading two doctypes) you could try this:
如果这在旧浏览器中不起作用（由于浏览器读取两个文档类型），您可以尝试以下操作：
<!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<![endif]-->>
回答by Divya Manian
It is likely it is going into compatibility mode with the conditional comments. We recommend that you set the x-ua-compatibleheader server side within a .htaccess file or other server config files.
它很可能会进入带有条件注释的兼容模式。我们建议您x-ua-compatible在 .htaccess 文件或其他服务器配置文件中设置头服务器端。
回答by Vikas Tiwari
try DOCTYPE html instead of doctype html doctype tag is case sensitive, this would be the reason.
尝试 DOCTYPE html 而不是 doctype html doctype 标签区分大小写，这就是原因。
