第-1-章-浏览器兼容性解决方案.ppt

《第-1-章-浏览器兼容性解决方案.ppt》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、第1章浏览器兼容性解决方案网站综合开发解析本章进阶了解兼容问题解决针对IE6.0、IE7.0和Firefox浏览器常见的兼容问题简介目前浏览器全球市场份额比例表简介目前IE6/7/8浏览器全球市场份额兼容性的由来浏览器的兼容问题浏览器的版本问题需要兼容的浏览器IE浏览器Firefox浏览器什么是基于IE内核的浏览器常用浏览器浏览器显示的差异IE6.0浏览器显示效果Firefox浏览器显示效果避免使用会产生兼容问题的CSS属性使用CSSHack解决兼容问题其它兼容方法兼容问题的解决原理｛属性：属性值！important｝CSSHack的使用针对IE的CSSHack针对Firefox的CSSHack针对IE7.0浏览器*+htmlselect{property:value;}针对IE6.0浏览器select{_property:value;}针对IE浏览器*select{property:value;}border:10pxsolid#000;*border:10pxsolid#F00!important;*border:10pxso

3、lid#00F;border:10pxsolid#000;*border:10pxsolid#F00;_border:10pxsolid#00F;=盒子模型方面的Hack技术盒子模型浮动时的双倍外边距Bug处理只发生在IE6.0及以下版本盒子模型方面的Hack技术ul的问题ul{margin:0;padding:0;list-style-position:inside;}ul{margin:00015px;padding:0;}IE浏览器IE浏览器Firefox浏览器浏览器中常用的默认样式列表元素的默认样式ul{list-style-t

4、ype:none;padding:0;}IE6.0浏览器IE6.0浏览器Firefox浏览器Firefox浏览器浏览器中常用的默认样式ul{list-style-type:none;margin-top:0;padding:0;}ul{list-style-type:none;margin:0;padding:0;}结论：Firefox浏览器中浏览器中常用的默认样式元素居中元素名称{margin:0auto;}注意：设置元素居中时，要设置该元素的宽度才有意义。IE浏览器中定义父元素的text-align的属性为center。父元素下的所

5、有元素在默认下都居中。浏览器中常用的默认样式页边距Firefox浏览器中padding默认值为8像素。body{margin:0;padding:0;}IE浏览器中margin默认值为10像素。让IE8.0兼容IE7.0的模式X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的。目前IE8尚在测试版中，可直接在页面的head的meta标签中加入如下代码：

6、"X-UA-Compatible"content="IE=7"/>“盒子模型”被看做是一个矩形，由内容、填充、边框和边距构成。将div元素设置为margin:0auto,可以实现居中对齐。为了使IE8.0兼容IE7.0,在页面的head的标签中加入一段代码：。本章总结谢谢！