Put all IEs older than IE9 into quirks mode via HTML directives
I want my page to be rendered in Quirks mode in IE6, IE7 and IE8. I want to keep all other browsers (recent versions) in HTML5 standards mode.
What does not work:
- Put the DOCTYPE declaration into second line (known measure in IE, but will trigger quirks in IE9 as well)
- Omit the DOCTYPE declaration (will trigger quirks in at least FF, MDN docs)
Any ideas, how I could accomplish this via purely HTML measures?
Some background:
Because of heavy usage of the border box model, my page layout happens to render best if 开发者_如何学Gothe older IEs are in Quirks mode.
Support for box-sizing did not appear in IE before version 8.
There is sum other stuff, that also works better in IE8 quirks.
My use of the border box model:
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
You can establish this using the X-UA-Compatible meta tag in combination with conditional comments.
First, use a conditional comment to hide the tag from IE 9 and later:
<!--[if lt IE 9]>
Then, insert a meta tag that triggers quirks mode:
<meta http-equiv="X-UA-Compatible" content="IE=5.5" />
Next, close your conditional comment:
<![endif]-->
Also, make sure you start your document with a <!doctype html> so IE9 won't be in Quirks mode; if it already uses the IE 5.5 rendering engine it won't ignore the conditional comment.
- More about conditional comments
- About the X-UA-Compatible header /
<meta>tag
I know it's not exactly what you asked for, but have you considered using ie7-js?
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues.
Here's the test case for box-sizing: border-box.
If anything else on your page uses JavaScript, I believe this is the best solution.
Try
<meta http-equiv="x-ua-compatible" content="ie=9, ie=5">
加载中,请稍侯......
精彩评论