前端浏览器兼容性问题及解决方法.ppt

前端浏览器兼容性问题及解决方法王国军itwanggj@什么是浏览器兼容问题?·浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。通俗的讲,就是使用不同的浏览器(Firefox、Chrome、IE6E7等)访问同一个网站,或者页面的时候,在一个浏览器下显示正常,在另一个浏览器下就全乱了。不同的浏览器对CSs解释不同。最常用到的浏览器***@0@您“最头疼”的浏览器我没哭只觉得累如何在5、6、7、8中调试页面?TEste人品T月wm如lEnEgocooooooOaGCah..topgndedloglE浏览器开发人员工具ndexl,htr-F12开发人员且F12DOM资调试序网性能文拉莹式默认恒浏览器文件分解数认地理位置浏览器兼容性有些什么问题呢?1div的垂直居中问题vertical-align:middle;line-height:200px;将行距增加到和整个DⅣ一样高,然后插入文字,就垂直居中了缺点是要控制内容不要换行。2margIn加倍的问题设置为foat的dv在e下设置的margin会加倍这是一个E6都存在的bug解决方案是在这个d里面加上display:inline#lamfloattfloat:leftmargIn:5px;/*E下理解为10px*/display:inline;/*IE下再理解为5px*/display:inline;默认。此元素会被显示为内联元素,元素前后没有换行符3浮动产生双倍距离问题#boxfloat:left;width:100pxmargin:000100px;/这种情况之下E会产生200x的距离display;inline;∥/使浮动忽略这里细说一下bock与inline两个元素block元素的特点:总是在新行上开始高度宽度行高边距都可以控制(块元素)nine元素的特点:和其他元素在同一行上不可控制《内嵌元素#boxtdisplay:block;//可以为内嵌元素模拟为块元素display:inline;/实现同一行排列的效果diplay:table;