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

第1章浏览器兼容性解决方案,网站综合开发解析,本章进阶,了解兼容问题解决针对IE6.0、IE7.0和Firefox浏览器常见的兼容问题,简介,目前浏览器全球市场份额比例表,简介,目前IE6/7/8浏览器全球市场份额,兼容性的由来,浏览器的兼容问题浏览器的版本问题,需要兼容的浏览器,什么是基于IE内核的浏览器常用浏览器浏览器显示的差异,IE6.0浏览器显示效果,Firefox浏览器显示效果,避免使用会产生兼容问题的CSS属性使用CSSHack解决兼容问题其它兼容方法,兼容问题的解决原理,属性：属性值！important,此内容只有IE可见此内容只有IE6.0可见,CSSHack的使用,针对IE的CSSHack针对Firefox的CSSHack,针对IE7.0浏览器*+htmlselectproperty:value;,针对IE6.0浏览器select_property:value;,针对IE浏览器*selectproperty:value;,border:10pxsolid#000;*border:10pxsolid#F00!important;*border:10pxsolid#00F;,border:10pxsolid#000;*border:10pxsolid#F00;_border:10pxsolid#00F;,=,盒子模型方面的Hack技术,盒子模型浮动时的双倍外边距Bug处理,只发生在IE6.0及以下版本,盒子模型方面的Hack技术,ul的问题,ulmargin:0;padding:0;list-style-position:inside;,ulmargin:00015px;padding:0;,IE浏览器,IE浏览器,Firefox浏览器,浏览器中常用的默认样式,列表元素的默认样式,ullist-style-type:none;padding:0;,IE6.0浏览器,IE6.0浏览器,Firefox浏览器,Firefox浏览器,浏览器中常用的默认样式,ullist-style-type:none;margin-top:0;padding:0;,ullist-style-type:none;margin:0;padding:0;,结论：,Firefox浏览器中,浏览器中常用的默认样式,元素居中,元素名称margin:0auto;,注意：设置元素居中时，要设置该元素的宽度才有意义。,IE浏览器中定义父元素的text-align的属性为center。,父元素下的所有元素在默认下都居中。,浏览器中常用的默认样式,页边距,Firefox浏览器中padding默认值为8像素。,bodymargin:0;padding:0;,IE浏览器中margin默认值为10像素。,让IE8.0兼容IE7.0的模式,X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的。目前IE8尚在测试版中，可直接在页面的head的meta标签中加入如下代码：,“盒子模型”被看做是一个矩形，由内容、填充、边框和边距构成。将div元素设置为