瀏覽器兼容筆記整理

注：綠色字體爲我的批註，藍色字體爲我的筆記，其餘字體爲他人文章內容。

部份內容轉自：https://haomou.net/2015/09/17/2015_explore/

IE

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）。

 

手機瀏覽器

1. 不支持 outerHTML 屬性及其操做