淺談瀏覽器兼容性問題-（4）工具及調試

#淺談瀏覽器兼容性問題-（4）工具及調試

##前言
瀏覽器兼容性的問題，即便積累得更多，也會有新的問題出現。此時咱們就須要會（利用工具）調試及解決問題。下面以一個滾動條寬度位置的問題爲例說明此點。

##問題
這個網址下的表格，在IE7模式下，會有一部分的內容被滾動條覆蓋了
![滾動條問題](https://images0.cnblogs.com/i/84053/201403/192333492714593.jpg)

##解決
咱們要利用`開發人員工具`，**一層層循序尋找看是哪一個元素致使的問題**，是裏面的太大，仍是外面的過小？其實圖中我已經找好了，是裏面的表格元素大了一點，並且是IE7下面纔有的問題，因此，迅速地在css中加上`+table_list{width:98%;}`，問題解決了。
http://gh.p2227.com/demo/applyLayout/playout.html

##思考
width:100%的意義是什麼呢，跟width:auto又有什麼區別？我找到了[這篇博客](http://blog.csdn.net/wgw335363240/article/details/7043861)，裏面討論到了margin的問題，但個人代碼中並無margin，因此我本身作了測試。
針對width:100%和width:auto的區別
[width:100%的測試代碼](http://gh.p2227.com/demo/BrowserCompatibility/debug/scrollBar.html)            [width:auto的測試代碼](http://gh.p2227.com/demo/BrowserCompatibility/debug/scrollBar-auto.html)

效果圖：

小結一下，IE6寬度100%，滾動條不見了，但中鍵能滾動，目測是滾動條生成在table的外面；IE7寬度100%，滾動條與table重疊，table的部份內容看不見；IE8寬度auto，寬度是之內容去適應的，並非parent對象的寬度

用表格來整理以下
| |寬度100%|寬度auto|
|--|--|--|
|IE6|滾動條附加在scroll元素之外|寬度適合，內容顯示完整|
|IE7|滾動條疊加在scroll元素內，內部元素寬度沒有把滾動條排除|寬度適合，內容顯示完整|
|IE8|寬度適合，內容顯示完整|寬度之內容爲準，並不會適應parent元素|

注：IE9以上在一點上的表現與IE8基本相同

##更好的解決方案
綜上，咱們針對IE67用`寬度auto`，其餘狀況用`寬度100%`是更好的解決方案
[代碼](http://gh.p2227.com/demo/BrowserCompatibility/debug/scrollBar-hack.html)

咱們面對兼容性問題，一方面能夠根據一些基本的原理及以往經驗去修改，另一方面是分析調試、羅列測試與新積累。如此**發現-解決-思考-整理**從而得出更好的解決方法。

##參考
http://blog.csdn.net/wgw335363240/article/details/7043861

http://www.cnblogs.com/aaronjs/p/3565253.html