今天在IE9中调试Wordpress主题的时候发现无论X-UA-Compatible如何设置,IE9都是用Quirks Mode渲染,好端端的W3C标准页面被硬生生渲染成IE5,惨不忍睹。而在F12工具中强制调成IE9标准渲染模式,全部正常。于是研究了一下问题在哪。
关于X-UA-Compatible和IE的Quirks Mode模式,Google一下有很多说明,这里有三篇很详细的文章[1][2][3]:
http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
http://www.fantxi.com/blog/archives/browser-mode/
http://blog.csdn.net/wingeek/article/details/6198996
先上我主题header.php的源码。这个源码是从官方自带主题twentyeleven修改而来的,结构没有什么变动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!--[if IE 9]> <html id="ie9" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"> <![endif]--> <!--[if lte IE 8]> <html id="ie" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"> <![endif]--> <!--[if !(IE)]><!--> <html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]--> <head> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />
上面第12行无论如何设置content都是无效的,IE9不会识别。 搜索了一下,发现有两种说法。一种认为在X-UA-Compatible之前必须至少有一个meta标签[4]。另一种说法是X-UA-Compatible之前不能有script标签[5],后一种说法应该是比较靠谱的,因为在官方的说明文章里有这么一句[1]:
The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
但问题是我源码的相应位置并没有script标签。迟疑很久,我怀疑是之前IE注释的问题,不仅如此,经过调试发现这些注释在IE中根本没有生效(IE注释的作用见参考资料[6])。于是试着把它去掉变成:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />
一切恢复正常了。然后我把IE注释移到body标签,注释也生效了。
结论:为防止失效,X-UA-Compatible最好紧跟在head之后,之前不要有任何不标准的标签。
[1] Defining Document Compatibility. MSDN Library. Microsoft Corperation. http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
[2] doctype声明、浏览器的标准、怪异等模式. Kairyou’s Blog. http://www.fantxi.com/blog/archives/browser-mode/
[3] [Web开发] IE文档模式终极指南. WinGeek. IE浏览器开发, HTML5. CSDN.NET. http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
[4] X-UA-Compatible 无效. 行者无疆. http://www.lewphee.com/notes/2011-05-20-165443.html
[5] IE8 X-UA-Compatible 失效?. 99css. http://www.99css.com/archives/463
[6] How To Create an IE-Only Stylesheet. Chris Coyier. CSS-Tricks. http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
[…] 民间文章:http://www.swingworks.net/2011/08/x-ua-compatible_breaks_in_ie9/ […]
X-UA-Compatible不是非要在meta标签里面指定的,也可以直接使用header输出。就不会出现你说的bug