致虚极 守静笃
某个项目需要支持打印样式，测试下来Chrome和FireFox正常，唯独IE8无法应用打印样式，也就是说识别不了@media定义的CSS样式节。
网上解决的办法也五花八门，我在这里整理一下，首先我们还是要从让IE支持media的的思路开始，首先JavaScript大将出马。
1. 项目css3-mediaqueries-js
该项目由Wouter van der Graaf发起（项目地址），旨在为了提供对于类似于IE 5+、Firefox 1+ 和 Safari 2低版本浏览器的Media Queries支持，使用方式也很简单，直接引用脚本即可，当然现在基本上非IE的浏览器和IE9及以上版本已经原生支持Media Queries了，所以我们可以使用IE特有的条件注释处理代码引用，比如下面的代码示例：
对于HTTP基本认证我前一篇文章也有所介绍，但是一次认证后浏览器将会把认证信息保存一段时间以避免在下一次打开时再次认证，也就是说认证成功后每次请求需要认证的页面时浏览器都会附加认证信息，一般在请求头的Authorization节点，但是如果用户需要注销当前登录就略显麻烦了。
不过在IE下比尔叔叔为我们提供了一个便捷的方式，那就是JavaScript执行下面的代码：
document.execCommand("ClearAuthenticationCache") |
试了下，IE下完全正常，如果说这么简单就解决这个问题的话，也太低估我们的浏览器大军了，FireFox和Chrome等非微软系的浏览器根本无视上面的代码，所以只有另辟蹊径了。
恶意跨站脚本（Cross-Site Scripting）的危害想必大家都知道，除了做好服务器端的安全过滤外，现在我们还可以利用一下IE8或者IE9的新的安全特性，那就是跨站脚本筛选器（Cross-Site Scripting Filter）。
对于IE的跨站脚本筛选器可以先参考IEBlog的《IE8 Security Part IV: The XSS Filter》这篇文章做个详细了解。如果IE检测到了跨站脚本攻击，那么IE将对页面做相应的修改以阻止攻击的发生，比如说这里有个示例页面。当我点击Say Hello的时候，IE会将表单的XSS脚本POST到服务端页面，这时IE8及以上浏览器检测到了可能的XSS攻击，于是提示“Internet Explorer 已对此页面进行了修改，以帮助阻止跨站点脚本。”
今天研究起WordPress的评论发布页wp-comments-post.php，假如我们提交一个不是期望的评论，比如我们什么都不写就点击提交评论，然后WordPress将交由wp-comments-post.php处理，当然这次处理将以失败告终，WordPress将显示一条错误消息，比如：“错误：请填写必填项目（姓名和电子邮件地址）。”。好了，这时如果我们右击查看源代码会找到一段奇怪的字符串：
自己用的Thinkpad T61，安装的是64位Windows 7系统，最近在使用Internet Explorer 9（IE9）浏览页面时总是容易卡住，显示选项卡没有响应，卡住一会后就恢复正常，要么就是选项卡崩溃恢复，很是不爽，查看事件查看器后找到了下面的事件描述：
错误应用程序名称: iexplore.exe，版本: 9.0.8112.16421，时间戳: 0x4d76255d
错误模块名称: nvwgf2um.dll，版本: 8.16.11.8694，时间戳: 0x4aa31782
异常代码: 0xc0000005
错误偏移量: 0x0004678e
错误进程 ID: 0xef8
错误应用程序启动时间: 0x01ccb8254566e22f
错误应用程序路径: C:\Program Files (x86)\Internet Explorer\iexplore.exe
错误模块路径: C:\Windows\system32\nvwgf2um.dll
听闻全球IE6倒计时网站中国版上线，真是个让人欢心鼓舞的消息，想必广大的网页设计师已经受够IE6的气了，是时候翻身得解放了，纵观世界，仅中国Internet Explorer 6（IE6）用户就占了近一半，所以这次全球IE6倒计时网站在中国的上线是具有标志性意义的，至少说微软官方已经在中国表态“换掉你手中的IE6吧！”，但是我们绝大多数人懂得，在中国这个特殊的环境下，IE6将会在很长的一段时间内维持一个很大的比例，所以说，作为前端人员，我们不能完全意义上的抛弃IE6，个性的做法还是不可取的，因为这将给一部分用户带来糟糕的体验，并损失这部分用户。
不过太过于钻浏览器的兼容性也是不当的，当然喜欢玩技术的除外，我们更多的是应该寻求一种优雅的降级，之所以是“优雅的”，首先这个是在不影响功能的前提下，适当的损失一些效果，比如CSS 3.0圆角层，大家都晓得IE6不支持CSS3的相关特性，那么对于一般的网页修饰，我们究竟有没有必要去用图片或者VML去追求在IE6下的表现一致呢？完全没有必要，只要不影响功能，我们没有必要将大量的开发时间耗费在产品修饰这些无伤大雅的小问题上，我们应该节省我们的时间去考虑如何将产品做得更好。之前我的博客设计曾经无聊到兼容了IE5，后来发现IE5的流量基本不存在，而且为了考虑兼容IE5已经耗费了我大量的时间，特别是阻碍了一些新技术的加入，所以为了不被一些条条框框所束缚，我干脆就放弃了IE5这类老掉牙的浏览器。
对于开发人员来说，如果你实在讨厌IE6，那么现在就在你的网站上加入提示吧，当然提示应该用委婉的语气，不能恐吓威胁用户，要记住的是用户有选择浏览器的权利，也有选择网站的权利，任何的威胁利诱，只会让你的用户迅速的流向竞争对手，微软官方已经提供了一段代码。大家可以参考一下，不过我感到不足的是，应该加上一个“不再提示”的按钮，要不用户浏览时老是看到那块醒目的提示就会感觉不舒服啦。
对于浏览器兼容，我之前已经写了多篇文章进行介绍了，大家可以猛击这里查阅。
今天在分析拍拍网页面时注意到下面这段脚本：
1 2 3 4 5 6 7 | <!--[if IE 6]> <script type="text/javascript"> // <![CDATA[ document.execCommand("BackgroundImageCache", false, true); // ]]> </script> <![endif]--> |
当看到这段脚本时觉得非常好奇，这对于IE6做了什么限制？通过搜索知道，IE6默认不缓存背景图片，CSS每次更改图片的位置时都会重新发起图片请求，这样对于视觉上有一定的闪烁，但是我过去的项目竟然感觉不到这样的问题，后来发现原来我一直用CSS Sprite解决这类加载问题的（貌似CSS Sprite也会造成这种情况，难道是本地测试看不出来？）。看来今天又学到了一招，搞前端的也真不容易，尤其是那个让人无语的Internet Explorer 6。
下面再贴出一种不推荐的办法，那就是CSS里写入expression，为什么不推荐，主要是因为效率问题，CSS expression都会带来效率上的问题，所以要避免使用。
1 2 3 | html { filter:expression(document.execCommand("BackgroundImageCache",false,true)); } |
最后我把拍拍网上的那段代码结合网上的一些讲解改动如下：
1 2 3 4 5 6 7 8 9 | <!--[if IE 6]> <script type="text/javascript"> //<![CDATA[ try { document.execCommand("BackgroundImageCache", false, true); } catch(e) {} //]]> </script> <![endif]--> |
END
这个貌似是随着IE8诞生而出现的东东，具体有什么用呢？不妨先参考一下微软MSDN的《定义文档兼容性》这篇文章。说白了X-UA-Compatible就是指定IE8或者以上版本以何种模式渲染网页。
应用场景，比如说我们在IE7的情况下设置调整好网页的正确渲染方式，的确，我们的网页在IE7下看起来正常了，但是IE8的出现可能会击毁我们原先美好的设想，那就是IE7下正常，以后版本的IE肯定也正常了，其实不然，微软在发布每一款浏览器时必定会对浏览器做一些调整，往往这些调整会让我们某些定义的布局出现意料外的状况，但是大家可能不想再加班加点的去修改现有的布局来适应新的浏览器，有没有一劳永逸的办法呢？答案就是X-UA-Compatible，有了它，我们的时光可以永远停留在IE7时代，当然，这可能有些不思进取，我还是建议你在下次网站改版时做好IE8、IE9及现有版本IE的兼容工作。
如果你需要让IE8、IE9或更高版本以IE7的兼容方式渲染网页的话，请在头标签定义如下的meta元标签。
1 2 3 4 5 6 7 8 9 10 | <html> <head> <!-- Mimic Internet Explorer 7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <title>My Web Page</title> </head> <body> <p>Content goes here.</p> </body> </html> |
value指定“IE=5”、“IE=7”或“IE=8”可选择相应的兼容性模式。 还可以指定“IE=edge”以告诉 Internet Explorer 8 使用可用的最高级别模式。
但是对于W3C标准比较关注的童鞋可能会发现，定义meta标签的方式可能会导致HTML5标准检测不通过，或者说挨个加meta标签太麻烦，那有什么办法避免呢？其实X-UA-Compatible可以写入HTTP Response Header（HTTP响应头中），对于Apache .htaccess定义如下。
1 2 3 | <FilesMatch ".(html|htm|php|aspx|asp)$"> Header set X-UA-Compatible "IE=EmulateIE7" </FilesMatch> |
对于支持ASP.NET的IIS服务器可以在web.config定义如下节点：
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=EmulateIE7" /> </customHeaders> </httpProtocol> </system.webServer> </configuration> |
2012年2月6日更新
对于Nginx服务器来说只需要在配置文件中使用add_header指令就可以了，add_header指令可以加在http, server, 或者 location节中：
# 比如如下指令则在header中告知IE始终以当前最先进的方式展示页面 add_header X-UA-Compatible IE=edge,chrome=1; |
一般情况下我们打开一个网站是通过浏览器的方式，这样打开的网站将会有地址栏前进后退按钮等一系列的浏览器特性，随着B/S应用和追求最大可视浏览面积的兴起，大家可能不再满足于一般的浏览器特性，因为我们已经让我们的网站看上去更加应用程序化，特别是Ajax应用的推广，大家可能感觉以网页的形式去构造交互式程序将变得比直接通过类似于C/C++编程得到的桌面应用来得方便，但是如何让我们的网页看上去更加像桌面应用程序呢，这里就需要借助于浏览器。
其实Mozilla实验室很早就推出了一款实验型产品，那就是Prism（官方主页），这个就是借助于火狐(FireFox)浏览器的内核将网页变得更像应用程序，其可定制的东西有不少，包括建立图标什么的一应俱全。
