浅谈浏览器兼容性问题-（4）工具及调试

#浅谈浏览器兼容性问题-（4）工具及调试

##前言
浏览器兼容性的问题，即使积累得更多，也会有新的问题出现。此时我们就需要会（利用工具）调试及解决问题。下面以一个滚动条宽度位置的问题为例说明此点。

##问题
这个网址下的表格，在IE7模式下，会有一部分的内容被滚动条覆盖了
![滚动条问题](//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)

效果图：

浅谈浏览器兼容性问题-（4）工具及调试

前言

浏览器兼容性的问题，即使积累得更多，也会有新的问题出现。此时我们就需要会（利用工具）调试及解决问题。下面以一个滚动条宽度位置的问题为例说明此点。

问题

这个网址下的表格，在IE7模式下，会有一部分的内容被滚动条覆盖了

解决

我们要利用开发人员工具，一层层循序寻找看是哪个元素导致的问题，是里面的太大，还是外面的太小？其实图中我已经找好了，是里面的表格元素大了一点，而且是IE7下面才有的问题，所以，迅速地在css中加上+table_list{width:98%;}，问题解决了。 http://gh.p2227.com/demo/applyLayout/playout.html

思考

width:100%的意义是什么呢，跟width:auto又有什么区别？我找到了这篇博客，里面讨论到了margin的问题，但我的代码中并没有margin，所以我自己做了测试。 针对width:100%和width:auto的区别 width:100%的测试代码    width:auto的测试代码

效果图：

小结一下，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

小结一下，IE6宽度100%，滚动条不见了，但中键能滚动，目测是滚动条生成在table的外面；IE7宽度100%，滚动条与table重叠，table的部分内容看不见；IE8宽度auto，宽度是以内容去适应的，并不是parent对象的宽度

用表格来整理如下

	宽度100%	宽度auto
IE6	滚动条附加在scroll元素以外	宽度适合，内容显示完整
IE7	滚动条叠加在scroll元素内，内部元素宽度没有把滚动条排除	宽度适合，内容显示完整
IE8	宽度适合，内容显示完整	宽度以内容为准，并不会适应parent元素

注：IE9以上在一点上的表现与IE8基本相同

更好的解决方案

综上，我们针对IE67用宽度auto，其他情况用宽度100%是更好的解决方案 代码

我们面对兼容性问题，一方面可以根据一些基本的原理及以往经验去修改，另外一方面是分析调试、罗列测试与新积累。如此发现-解决-思考-整理从而得出更好的解决方法。

参考

http://blog.csdn.net/wgw335363240/article/details/7043861

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