浏览器的那些事儿（一）

浏览器的兼容性真是个很头疼的问题，之前自己的代码都是在Chrome浏览器下测试的，真正要公开的时候需要应对各种类型、各种版本的浏览器。Chrome的页面简洁，没有传统菜单栏及繁多的工具按钮。基于Webkit内核开发，打开网页速度快，用户体验很好。Google开发的“V8引擎”技术，支持多线程，让Javascript脚本执行效率得到提高。还有支持多标签浏览，一个页面的崩溃不会导致其它标签页面的关闭。

经过测试，主流浏览器Firefox也是可行的。IE访问时，应用中的地图没有显示，按F12查看源代码时发现js请求是失败的，也就是没有执行到那个功能。但点击“禁用”菜单发现脚本并没有被禁用，那为什么没有请求成功呢？

之前没用过IE的开发者工具，菜单栏最后的“浏览器模式”和“文档模式”引起了我的注意。百度了一下知道，在IE8、IE9、IE10中，为了解决兼容性的问题，引入了“浏览器模式”和“文档模式”两个概念。

“浏览器模式”的主要作用是为了兼容较早版本的IE，它会向浏览器发出userAgent，表示哪个版本的浏览器发出请求，以此来为某个特定的IE版本设计的代码正确执行。“文档模式”的主要作用是影响浏览器显示网页HTML的方式，在接到返回的HTML文件后，决定以哪个IE版本的文档模式解析该页面，不同的文档模式对应不同的排版引擎，不同的js引擎。

默认情况下IE10的浏览器模式为IE10，文档模式则是由当前页面的<head></head>标签里的meta属性决定的，如下是设置成IE9的文档模式。

<meta http-equiv="X-UA-Compatible" content="IE=9" > </meta>

想要尝试不同IE下的测试效果时，只需切换浏览器模式，选择不同的Internet Explorer选项，文档模式也会做出相应的改变。注意到“文档模式”中有一个选项是“Quirks”即“怪异模式”，怪异模式意味着一个相对新的浏览器模拟许多在就浏览器中存在的bug，目标是使页面显示出我们想要的效果，这对前台代码的调试是很有帮助的。但怪异模式故意违反了CSS和HTML的规范，并不适合作为默认的文档模式。

经过多次尝试，发现我的博客刚载入时的文档模式是“IE 9 标准”，IE是10 的浏览器模式也就是“IE 10”，这时应用界面的地图是不显示的。将“浏览器模式”调低，测试IE 10,9,8,7，文档模式做出相应变化（自动的），都是不会显示。当把“文档模式”调低，修改浏览器模式（手动的），此时只有当“文档模式”和“浏览器模式”都为7时才会正确执行显示地图的javascript代码。而将“文档模式”设置为“Quirks”时，无论哪种浏览器模式都会正确显示了。

这样带来的问题就是当访客的浏览器为IE9或者更低版本时，应用中的部分功能是不能成功执行的。所以就想到通过增加判断浏览器的代码，当不符合要求时给出提示信息。当然这些代码主要是针对以IE为核心的浏览器的，比如“搜狗”、“360”、“QQ”等。

判断代码如下

<!--[if lte IE 9]>
    <div id="ie9-warning" >小 i 温馨提示：检测到您正在使用 Internet Explorer，可能有些效果差异以及功能无法展示。建议您使用以下浏览器
        <a href="http://www.google.com/chrome/?hl=zh-CN">Chrome</a> /
        <a href="http://www.mozillaonline.com/">Firefox</a> /
        <a href="http://www.apple.com.cn/safari/">Safari</a>
    </div>
    <script type="text/javascript">
        function position_fixed(el, eltop, elleft)
        {
            if(!window.XMLHttpRequest)
                window.onscroll = function()
                {
                    el.style.top = (document.documentElement.scrollTop + eltop)+"px";
                    el.style.left = (document.documentElement.scrollLeft + elleft)+"px";
                }
            else
                el.style.position = "fixed";
            }
            position_fixed(document.getElementById("ie9-warning"),0, 0);
    </script>
<![endif]-->
<style type="text/css">
    #ie9-warning
    {
        background:rgb(255,255,225);
        position:absolute;
        top:0;
        left:0;
        font-size:12px;
        color:#333;
        width:97%;
        padding: 2px 15px 2px 23px;
        text-align:center;
    }
    #ie9-warning a
    {
        text-decoration:none;
    }
</style>

注意到开始<!–[if lte IE 9]> ，lte就是Less than or equal to的简写，也就是小于或等于的意思。其它的还有lt，是Less than的简写，也就是小于的意思。gte，就是Greater than or equal to的简写，也就是大于或等于的意思。gt，就是Greater than的简写，也就是大于的意思。

!，就是不等于的意思，跟javascript里的不等于判断符相同。最后有个<![endif]–> ，也就是说如果条件成立的话执行中间的那段代码。

参考资料

https://www.imququ.com/post/browser-mode-and-document-mode-in-ie.html

http://blog.sina.com.cn/s/blog_5b7c070d010193nk.html

2013-12-31