开发者

Put all IEs older than IE9 into quirks mode via HTML directives

开发者 https://www.devze.com 2023-03-06 01:06 出处:网络
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.

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

精彩评论

暂无评论...
验证码 换一张
取 消