浏览器兼容笔记整理

注：绿色字体为个人批注，蓝色字体为个人笔记，其他字体为他人文章内容。

部分内容转自：https://haomou.net/2015/09/17/2015_explore/

1.IE7以下 不支持display:inline-block
2.IE img标签书写问题 IE10以下如果自定义的标签属性写成：

<img datasrc="_imgUrl_" alt="_productName_">

IE会自动将属性的名称按照驼峰发修改成如下：

<img dataSrc="_imgUrl_" alt="_productName_">

所以，以后使用，保险的方法：

<img data-src="_imgUrl_" alt="_productName_">

3.IE6 不兼容min-width 原文链接：http://caibaojian.com/min-width-min-height.html

IE6 不兼容min-width，但我们可以通过IE的一个特性，就是能够根据内容的宽度或者高度自动扩充盒子的大小。一些人用CSS表达式来写，但更多的人也许会用IE6特有的hack来表达(hack方式可参阅http://blog.csdn.net/freshlover/article/details/12132801)。今天分享一个不用ie hack的代码，而是利用ie7等浏览器支持important的这个属性来改良。

以前的代码：

.min-box{min-width:200px; _width:200px; min-height:200px; _width:200px;}

现在改良的代码：

.min-box{min-width:200px; width:auto !important; width:200px; min-height:200px; height:auto !important; height:200px;}

由于important级别大于width级别，而IE6不识别important这个属性，所以以上代码就实现了浏览器的一致效果。

dom操作

1.IE8 不支持element.insertBefore()操作，其他浏览器支持的。

2.火狐浏览器不支持下面方式初始化日期：new Date("2015-10-30 23:59:59")，chrome支持，IE支持

webkit浏览器存在的问题（js的浮点数精度问题）

在webkit等核心的浏览器中，在控制台依次输入下面的算式，你会发现？？？

1
2
3

0.39 * 10
0.59 * 10
0.69 * 10

ps：其实是js的浮点数精度问题，解决这个问题最常见的思路就是把浮点数转成整数再做运算。

这里有一篇博客 http://www.cnblogs.com/yjzhu/p/3755159.html 讲了这个方法。

文章中的除法处理存在bug，测试发现如果转成整数后，当被除数小于除数时，相除仍会出现精度问题，不过这个问题js原生的除法运算已经解决了，不需要我们另外写方法。

解决思路总结如下，主要对js浮点数运算的乘法加法减法做优化

乘法：先把两个数转成整数相乘，记录下变成整数后扩大的倍数，即是pow（10，小数点后的位数之和）的值，最后在除以扩大的倍数还原回去。

加法：同乘法思路，加法和减法扩大和还原的倍数为pow（10，两个操作数的最长小数位）。

减法：同乘法和加法思路，在最后用toFixed()处理保留小数位的问题，保留的小数位为两个操作数的最长小数位。

另外，文章中用catch处理了小数位为空的情况，否则会遇到NaN值的问题，NaN不是一个数，所以在与其他数值比较时都会返回false，Math.max(NaN,number)方法会得到NaN，与NaN做运算的结果还是NaN，这样在加法和减法扩大还原时就会出现错误了（结果为NaN）。

手机浏览器

不支持 outerHTML 属性及其操作

来源：oschina

链接：https://my.oschina.net/u/2368420/blog/732070

标签

浮点数