淺談浏覽器相容性問題-（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