浏览器兼容性问题汇总

1、问题：某个按钮在ie8下点击不了，鼠标移上去没有呈现手型，代表没有移到该按钮上

    解决：设置该按钮的定位，调整其z-index

2、问题：某些样式在特定的浏览器下渲染出现偏差

    解决：定义只有该浏览器识别的css样式，通过该样式去调整就不会影响其他浏览器的渲染，例：css hack

3、问题：IE9不支持ContextualFragment

    解决：在使用之前添加如下代码

<script type="text/javascript">
    if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment)
    {
        Range.prototype.createContextualFragment = function(html)
        {
            var frag = document.createDocumentFragment(),
                    div = document.createElement("div");
            frag.appendChild(div);
            div.outerHTML = html;
            return frag;
        };
    }
</script>

 4、IE8<img>标签下的a链接不能被点击原因：a中缺乏内容，可以这样hack：设置a的背景色然后透明度0.1

 5、字体边缘发光 filter:glow(color=#00178b,strength=5); text-shadow: 0 0 5px #00178b;

 

6、酷炫背景粒子类库particles.js兼容IE8步骤：

① 页面增加excanvas.js

② 将particles.js中的addEventListener全部改为jquery的on，用jquery帮我们做兼容

③ 将particles.js中的getElementByClassName改为jquery的$('.xx')，因为IE8不兼容getElementByClassName该方法

④ 对于手动append到页面的canvas元素需要在append之后调用excanvas.js中的方法，例如particles.js1521行

/* 兼容IE8，调用excanvas方法 */
if (/MSIE/.test(navigator.userAgent) && !window.opera) {
canvas=window.G_vmlCanvasManager.initElement(canvas);
}

7、a:hover设置background后在IE下是无法显示背景的：

在a标签中增加'<span>'标签，然后设置display属性之后对span设置background

 

8、IE8兼容背景透明内容不透明方法

/*不能设置z-index,根据情况设置需要的background的颜色,chrome/firefox中第一句起作用；IE中后两句起作用*/
    .background{
        background: rgba(0,0,0,0.5);/*firefox、chrome*/        
        background: #000\9;/*IE*/
        filter: alpha(opacity=50);/*IE*/
    }

/*可以设置元素或其祖先节点为定位样式relative/absolute/fixed*/
.content{
    position:relative;  
}