项目中遇到的兼容问题总结

1.在Firefox浏览器 draggable=false 不起作用的问题

https://stackoverflow.com/questions/26356877/html5-draggable-false-not-working-in-firefox-browser   

 

2. svg在Firefox浏览器无法显示问题和绘制到canvas的问题 

需要使用encodeURIComponent  解决image的src图片源设置为svg显示格式为data:image/svg+xml;utf8,<svg>.......</svg>的无法显示问题！

svg节点设置width和height，解决image设置同样的src格式无法绘制到canvas的问题！

https://stackoverflow.com/questions/28690643/firefox-svg-canvas-drawimage-error

https://stackoverflow.com/questions/37715672/not-able-to-draw-svg-to-html5-canvas-in-firefox-even-with-height-and-width-set

 

3. 设置z-index为最大值将其置为最顶层且高于全屏的元素，但是只在chrome中有效（https://my.oschina.net/u/2306318/blog/879608）

有时在全屏状态下，要点击按钮有弹框出现，然而浏览器的z-index最大为：2147483647

z-index最大值:
IE FireFox Safari的z-index最大值是2147483647 。
Opera的最大值是2147483584.。
IE Safari Opera在超过其最大值时按最大值处理。
FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对不会高于2147483647层

最小值
IE FireFox Safari的z-index最小值是-2147483648
Opera的z-index最小值-2147483584
FireFox在-2147483648<=z-index<0时层不显示 在z-index<-2147483648时溢出实际数字正负不定
IE Safari Opera在z-index<0时显示,在小于其最小值时都按其最小值处理

等值时表现 
各个浏览器当两个层z-index相同时,按网页代码中层出现的顺序,后出现的层高于先出现的层。
跨浏览器永远最大：2147483647
跨浏览器永远最小：Hack(”IE,Safari,Opera”:-2147483648,”FireFox”:0)

这时如果用z-index来实现将会有浏览器问题。

解决方案是 ：利用继承，将要弹框的内容写在全屏的内容里面。这时全屏情况下，将要弹框的内容的层级也会继承过来，z-index的效果将相对于全屏状态下！！！

 

4. 设置360浏览器默认使用极速模式 

<meta name="renderer" content="webkit">