问题
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)
The files have the HTML5 doctype:
<!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)
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...
Is there a way to prevent IE going into quirks mode with <!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">
回答1:
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.
Also, just remove the comments after the doctype and that should make the problem go away.
回答2:
Try putting this in the <head></head> tag:
<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.
回答3:
IE doesn't go into quirks with the HTML doctype - that's the whole point!
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.
(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.
回答4:
Try save file as UTF-8 without BOM. It helped me.
回答5:
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 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]-->>
回答6:
It is likely it is going into compatibility mode with the conditional comments. We recommend that you set the x-ua-compatible header server side within a .htaccess file or other server config files.
回答7:
I see nothing wrong with the full head markup you posted. This is a standard markup widely used in boilerplates that include Modernizr, a nifty JavaScript library used to detect browser features.
<!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, IE8 and IE7, with both the uppercase and lowercase doctype, just for double-checking.
The only odd thing I have observed on IE7 was that webfonts (all four in my app) would fail to render sometimes, when I used <!doctype html> instead of <!DOCTYPE html>.
FYI: I've just checked and see that the HTML5 Boilerplate Project has removed support for IE conditional comments on 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 Github on Jan 24th 2010.
回答8:
try DOCTYPE html instead of doctype html doctype tag is case sensitive, this would be the reason.
来源：https://stackoverflow.com/questions/9265532/ie-and-html5-doctype-issues