我从事前端行业也蛮长时间,想想自己当初刚入行的时候被众多不同内核的浏览器的兼容头痛,经常是在这个浏览器上调试好了,但是在那个浏览器上又出问题。真是不同版本,不同浏览器搞的你是晕头转向的。但是,也正是这些bug,这些兼容问题,才体现出前端的价值是吧,哈哈!当然,只是一小部分啦。下面是我在工作的时候总结出来的一些调试页面兼容问题的方法,希望能帮到一些遇到问题的同学。
1.利用各种前端利器辅助查找问题根源 ---Firebug,IE WebDeveloper等等。
2.边框背景调试法 ---估计一下出错的位置在那,在它的标签上加边框或背景,这样就可以看到该模块占了多少位置,是否在撑出规定的范畴。
3.最大宽度最小宽度法 ---找到出错区块修改出题的模块的宽度,如果宽度改小后,下沉问题解决。就可以判断问题就是出现在这个元素上。
4.样式排除法 ---有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。
5.模块确认法 ---有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块,寻找到触发问题的 HTML 模块。
6.至于其它问题的,最好的办法就是google,百度,看书。对于这些方法还不行,可以问有经验的同事帮忙。
以上就是我平时工作总结出来的,虽然很是基础,却也还是实用的。在解决问题的时候当然也需要你对一些浏览器的一些渲染等工作原理的知晓才能解决问题。在解决页面兼容问题上还有很多方法,还希望其他高手指点,欢迎留言交流,3Q