#浅谈浏览器兼容性问题-(4)工具及调试
##前言
浏览器兼容性的问题,即使积累得更多,也会有新的问题出现。此时我们就需要会(利用工具)调试及解决问题。下面以一个滚动条宽度位置的问题为例说明此点。
##问题
这个网址下的表格,在IE7模式下,会有一部分的内容被滚动条覆盖了

##解决
我们要利用`开发人员工具`,**一层层循序寻找看是哪个元素导致的问题**,是里面的太大,还是外面的太小?其实图中我已经找好了,是里面的表格元素大了一点,而且是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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步