(精)第 1 章 浏览器兼容性解决方案.pptVIP

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