遇到的浏览器兼容问题及应对方法

前言：

上周天的时候有个学长找我帮忙做三张页面，因为没有数据交换之类的，只是单纯的前端页面，想着好久没做东西， 看书都看烦了，所以就接了也当是练手。之前因为没有系统的看书，所以其实很多问题都考虑的不全面，属于知其然不知其所以然的状态，虽然现在也还有很多要学的东西，但是知道自己的不足总比不知道强吧？而且这也算是一种进步？总之，遇到各种问题，然后我发现问题主要分为两类，一：我自己知识点不够所以不知道怎么解决的，这种问题大多求问度娘或者问大神是可以搞定的；二：属于确实是现阶段技术存在漏洞的，不论是还没能实现的、实现了但存在歧义或冲突的皆在此列。而就我这次做的页面我遇到最大的问题就是浏览器兼容性的问题，有了解决方法的就在此和大家分享，希望能够抛砖引玉，我也能学到更多的知识，谢谢。

正文：

1.遇到问题：当前浏览器为ie7及以下版本

　解决思路：用一个div覆盖，让用户不能看到正常页面呈现的内容

　实现方法：将正常是显示内容的div的display属性设置为none，将覆盖div的display属性设置为block（PS：在其中可以加入浏览器下载链接，让用户尽快正常浏览页面）

2.遇到问题：ie8中不能实现圆角，因为ie8不能很好的支持css3

　解决思路：下载PIE使得ie8支持css3中的圆角

　实现方法：这里的实现方法就不细说了，下载然后“behavior: url(path/PIE.htc);”把路径更改了就能够访问了，说一下需要注意的几点问题：

　　　　　　（1）这个引用一定要放在html文件里面，而且路径也是相对于引用的html文件而言的，放在css文件里面不会有效果

　　　　　　（2）如果发现引用成功之后，需要圆角的对象消失了，不要方，去洗个澡出来就好了，亲测

　　　　　　　　开玩笑的，我确实去洗了个澡但是并没有出现，所以代码出现BUG什么的，求神拜佛到底是没用啊（摊手），从头调了一遍，又去百度了一下，发现问题了，是因为z-index的缘故，但只　　　　　　　　设置一个z-index没有效果，哦~原来它的position属性不能是static即默认值，ok，设置position为relative就ok啦，完美的圆角在ie8就实现啦~（在此我真诚的感谢写出PIE的工程师　　　　　　　　们确实是因为你们的努力才让我如此轻松的实现了我想要的效果，康桑阿米达~）

3.遇到问题：依然是ie8，不能支持css3中的@media screen and (....)实现响应式布局

　解决思路：没办法，谁让它是磨人的小妖精呢？（耸肩）单独写一个js文件获取屏幕宽度，然后再分别添加对应样式

　实现方法：“”放在html中，然后在引入的js文件中实现就ok了。说一个期间遇到的痛苦的事情给大家乐一乐，　　　　　　我搞了半天，发现莫名其妙就是不行，去网上找了各个大神的代码来，一一对照就是不行！怎么能不行呢，这是多么伤自尊的事情啊。然后发现，居然是因为在"ie9"和“>”之间多了一个空

　　　　　　（手动再见）。不过调出BUG之后那种成就感还是有的哈，就是知道是因为这个原因，有种“让我想先杀自己100遍好了”的感觉。

　　　　　　js代码贴在下面，其实原理很简单。主要是其中有innerWidth和clientWidth的一些小区别，如果有疑问的话网上有很多大神的详细解析可以搜来看看。

<span style="color: #008000;">/*</span><span style="color: #008000;">用于兼容ie8实现不同宽度窗口的响应式布局</span><span style="color: #008000;">*/</span>
<span style="color: #0000ff;">function</span><span style="color: #000000;"> getWidthHeight(){
    </span><span style="color: #0000ff;">var</span><span style="color: #000000;"> wWidth,wHeight;
    </span><span style="color: #008000;">//</span><span style="color: #008000;">获取窗口宽度</span>
    <span style="color: #0000ff;">if</span><span style="color: #000000;">(window.innerWidth){
        wWidth </span>=<span style="color: #000000;"> window.innerWidth;

    }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(document.body &&<span style="color: #000000;"> document.body.clientWidth){
        wWidth </span>=<span style="color: #000000;"> document.body.clientWidth;
    }
    </span><span style="color: #008000;">//</span><span style="color: #008000;">获取窗口高度</span>
    <span style="color: #0000ff;">if</span><span style="color: #000000;">(window.innerHeight){
        wHeight </span>=<span style="color: #000000;"> window.innerHeight;
    }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(document.body &&<span style="color: #000000;"> document.body.clientHeight){
        wHeight </span>=<span style="color: #000000;"> document.body.clientHeight;
    }
    </span><span style="color: #008000;">//</span><span style="color: #008000;">通过深入Document内部对body进行检测，获取窗口大小</span>
    <span style="color: #0000ff;">if</span>(window.documentElement && window.documentElement.clientWidth &&<span style="color: #000000;"> window.documentElement.clientHeight){
        wWidth </span>=<span style="color: #000000;"> window.documentElement.clientWidth;
        wHeight </span>=<span style="color: #000000;"> window.documentElement.clientHeight;
    }

    </span><span style="color: #0000ff;">return</span> {"wWidth":wWidth,"wHeight"<span style="color: #000000;">:wHeight};
}

$(document).ready(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">var</span> wWidth =<span style="color: #000000;"> getWidthHeight().wWidth;
    </span><span style="color: #0000ff;">if</span>(wWidth ){
        $("body").css("font-size","5px"<span style="color: #000000;">);
    }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(wWidth > 900 && wWidth ){
        $("body").css("font-size","8px"<span style="color: #000000;">);
    }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(wWidth > 1200<span style="color: #000000;">){
        $(</span>"body").css("font-size","10px"<span style="color: #000000;">);
    }
});</span>

4.遇到问题：在ie11之前的版本，如果在标签中，则会出现奇怪的蓝色边框

　实现方法：给加一个“border:0;”绝对立竿见影

5.遇到问题：因为是前台首页，所以写了图片滚动，ie10以下图片莫名出现多余空隙

　实现方法：给加一句“display:block;”效果卓越

6.遇到问题：竖向显示的文字用了“writing-mode:tb-rl;”但是在去朋友的电脑上调时发现居然在我心爱的FF上没效果，不可能啊？？？然后发现是因为FF4及以下版本没有实现这个属性，这个属性最初是　　　　　　由ie想出来的（老实说，我当时有点意外呢，毕竟ie在我心中是个孤僻的天才，属于自己搞点小发明但是都属于破坏向的，所以居然这么好用的属性是被ie想出来的，而且FF居然要到了后来才　　　　　　实现，不得不说对于我是挺意外的）

　解决思路：没法，有问题就得想办法解决，那就只能一句一句的用ul li嵌套，然后向右浮动，设置定宽来实现了（老实说在用过writing-mode后这个方法很傻而且效果不好）

　实现方法：思路说了，那就直接上代码。

<span style="color: #0000ff;"><span style="color: #339966;">//html部分</span><br></span>

<span style="color: #0000ff;"><span style="color: #339966;">//这里的<br>是为了让标点也能够重起一行</span><br><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>，天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>，天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>？天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>；<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>天气真好<span style="color: #0000ff;"><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>？<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">><br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

<span style="color: #800000;"><span style="color: #339966;">//css部分</span><br>ul</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 6em</span>;<span style="color: #339966;">//em是一个相对单位，比px更好，1em = font-size的大小（如果没有设置font-size则由继承值决定）</span><span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #339966;">//保证布局不会崩掉</span><span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #339966;">//把默认样式去除</span>
}<span style="color: #800000;">
ul li</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #339966;">//实现从右向左布局</span><span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 1em</span>;<span style="color: #339966;">//定宽保证只显示一个字</span><span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 0.2em</span>;<span style="color: #339966;">//保证每个li包含的内容之间有一定的间隔，能够看清楚</span><span style="color: #ff0000;">
    word-break</span>:<span style="color: #0000ff;">break-word</span>;<span style="color: #339966;">//告诉浏览器每个字后自动换行</span>
}

以上就是我调兼容性遇到的问题啦，以下就是我之前说的那两类问题，即我能力有限所以遇到的问题，还有就是现存的没有办法解决的问题

一：这个问题归根结底就两字：浮动！（必须任性给它加粗加底线）不论是莫名其妙的这个div就跑到后面去啦；哎，你这个img跟着上面的导航的布局跑什么跑；喂喂，这个p标签怎么这么不负责任呢？和你一起的img都乖乖在下面呆着，你跑到上面这个div里面的p标签旁边是要搞什么，搞基嘛？好吧，我承认这个锅说到底还是要自己背，因为浮动确实很强大，但是用不好会真的有很奇怪的结果出现。所以啊，好好看书吧，在这里骂这些标签或者浏览器感觉它们也挺无辜的。

二：（1）因为要异步加载文件进来，所以用到了JQuery的load方法，但是在谷歌浏览器上面是禁止的，没有办法调但是换到服务器上就好了，同样的还有360也是这样的

　　（2）谷歌中不能设置font-size小于12px，这是谷歌的BUG存在挺久的了，虽然不知道为何要一直留着，大概觉得这样很酷？在网上搜到一个解决办法“-webkit-text-adjust:none;”但是我测试没　　有成功，谷歌直接禁了，说是没有这个东西。

 

后话：

最后，有一点我个人的小感受，实践确实会学到很多知识，而且没有看书那么枯燥，但是这些知识会很散漫，所以看书这样系统的学习依然是必须的，所以之后会努力结合好两者，希望能有更多的进步吧。还有还有对于ie的一点小小感悟：因为ie很个性，浏览器实现里面特别爱特立独行，所以我之前特别讨厌ie，觉得大概是一群仗着自己很6就不把别人放眼里的天才家伙们，但是现在发现ie其实确实就我个人而言是背锅小天使，它本身对于前端的实现很有想法，很多细致的地方做得很棒，而且对于前端技术的发展也很有前瞻性，所以之前之所以会不住的骂它也是因为自己的无知吧，毕竟作为天才总是有一些不同于常人的脾气才能彰显它作为天才这个事实吧。我不会再毫无理由的骂它了，不过还是真心希望它能够在未来的某天，不要如此折磨我们可爱的前端程序猿了:-)