淺談瀏覽器兼容性問題-（2）本人解決方案理解與積累

#淺談瀏覽器兼容性問題-（2）本人解決方案理解與積累

##前言
 接着[前一篇](http://www.cnblogs.com/p2227/p/3593087.html)吧，咱們除了正確看待，還要有必定的解決方案積累。固然，IE沒有公開的源代碼，因此有不少內容只能是記錄，在使用中熟記於心並提早避免。

##【HTML/CSS】名(chou)揚(ming)天(yuan)下(bo)的IE6雙倍邊距問題
###思考
網上有不少關於該問題的文章，園子裏面也有不少，[戳我](http://www.cnblogs.com/YAOXI/articles/1691265.html)。這些大可能是從「已知問題」的角度去解決，但咱們的瀏覽器不會在發現問題的時候alert一個框告訴你：出現IE6雙倍邊距BUG啦！正向面對問題時，咱們只有現象，出現這個BUG很常見的現象是，**在其餘瀏覽器中排版很好的界面，在IE6中有元素被擠下去了**。若是出現這個問題，則要考慮這個BUG了，固然，能提早避免會更加好。

###解決方案（簡略）

* `display:inline;`
* `_margin:一半的邊距;`

##【HTML/CSS】IE6PNG透明問題
###思考

* gif也有透明功能，但只能不透明或者全透明，不能提供基於alpha值的半透明解決方案，而png則能處理，但可恨的IE6並不直接支持png透明。
* 以前有說起到微軟有獨家的濾鏡功能，這裏面有相關的解決方案

###解決方案
利用`AlphaImageLoader`濾鏡，先針對其餘瀏覽器正常載入背景，再針對IE6重設背景，相關CSS以下

```
.pngTransofrm{
background:url(../images/index2q/bg_title.png) no-repeat; 
_background:none;/*解決IE6PNG不能透明的問題 */
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/index2q/bg_title.png"); /*解決IE6PNG不能透明的問題，注意要相對於HTML文件的png文件的位置 */
}
```

[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/IE6PNG/)
###延伸

* 此方案只針對背景。按照語義化HTML的思考，若是圖片只是烘托，那應該用背景，若是該文章想表達的主題就是圖片（好比相冊）那麼應該用img
* 必須針對每一張圖片寫，濾鏡中的路徑要相對於HTML文件
* 更多解決方案：[戳我](http://www.w3cfuns.com/thread-297-1-1.html)

##【HTML/CSS】title屬性的行爲問題
###問題及解決方案
這裏引用本身當年的一篇文章
http://blog.csdn.net/p2227/article/details/7587641
只檢測到IE8下問題比較嚴重，因爲代碼是直接從IE8的F12中拷貝的，因此會有點不太規範。
###延伸
這是一個很細節的問題，可是前端就是要抓細節，抓用戶體驗。

## 【HTML/CSS】文字描邊（filter VS CSS3）
###思考
不少CSS3中新增的屬性，在IE678時代均可以用濾鏡去處理，以描邊`text-shadow`爲例，咱們能夠用`glow`濾鏡去處理

###解決方案
[戳我](http://gh.p2227.com/demo/BrowserCompatibility/glow/)


##【javascript】逗號處理問題
###思考
在IE678下，數組或JSON的最後一個逗號會被解釋成undefined，其餘瀏覽器會按W3C標準忽略。
###解決方案
本人以前的[優化方案](http://www.cnblogs.com/p2227/p/3541162.html)中有說起，利用正則表達式`,\s*[\r\n][\r\n]\s*\} `在項目源文件中搜索相關代碼

[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/JSONComma/)



## 【javascript】location跳轉與return false 
###問題及解決方案
在IE6中，``元素若是綁定了DOM事件，而且事件中有跳轉，而且href寫成javascript:void(0)，那麼要在事件中return false跳轉纔會生效。若是href寫成`#`則不會有這個問題。可是`href="#"`原本是用於跳轉到網頁頂部的，因此**javascript:void(0) + dom事件 +跳轉**的話，要加上`return false`纔會更加完美。這個問題很是細節，直接上[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/IE6Location/)比較容易說明問題


## 待續
因爲瀏覽器解釋HTML/CSS/Javascript原本就是很是多的內容，一時難以所有整理，待之後還會繼續修正添加。

個人計劃是要有四篇文章去說明
淺談瀏覽器兼容性問題-（3）他山之石整理
淺談瀏覽器兼容性問題-（4）工具及調試

##參考
http://www.w3cfuns.com/thread-297-1-1.html

http://www.jb51.net/article/26453.htm

http://wenku.baidu.com/link?url=Usfi_LRVUz9JxgcMqazT4yre8OJOCYD9dhFhHpSlPqEEAYyAEr_knIS6Na93CjBSd85-o0YH9RjacgIAteBNd2SSUQus_cNKNCORCRoEtb3

http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html