网页设计-CSS的Bug调试及Hack语法.ppt

CSS的Bug调试及Hack语法 什么是hack 浏览器大战的历史 netscape 》IE》IEFF》IEFFChrome 不同的浏览器的差异，兼容性是前台技术的噩梦 Hack的解决方案 hack原理：利用不同浏览器对某些特殊字符的识别能力的差异 浏览器差异如下： ?IE6能识别下划线“_”和星号 “?*?”，IE7能识别星号“*?”?，但不能识别下划线“_”，而FF两个都不能认识。还有，IE6以上和FF还可以识别 !important标识，表明优先的意思，而IE系列浏览器还识别一个“\9”的符号，FF不认识。 hack语法 区别FF, IE8，IE7，IE6 的常用方法： .class1{ background:orange ; /*FF等标准浏览器*/ background:yellow \9; /*IE8以上：因为IE都认识\9这个符号*/ *background:green; /*IE7：IE6，IE7都认识星号*/ _background:blue; /*IE6：因为IE6认识下划线*/} .class1{ background:orange ; /*FF*/ background:yellow \9; /*IE都认识*/ *background:green !important; /*IE7*/ *background:blue; /*IE6*/ } * hack语法说明（了解） 一般的书写hack的顺序是：FF等标准浏览器 - IE8 - IE7 - IE6 - 其他 实际上，IE8已经比较接近“标准浏览器”了，即不再像以前的IE6，IE7那样“怪异”了，因而通常不需要区分IE8和FF，IE9更接近标准。 * Bug类型 doctype没声明,带来的IE浏览器盒模型解析混乱（不一致） 解决: 进行xhtml 正确声明,如使用strict或transitional声明 通常，一个网站使用统一的文档声明 浏览器的初始值不同带来的。 例如：ul/li无序列表在火狐和IE分别显示不同效果，需要css样式初始化才可以：*{margin:0;padding:0;} 解决：进行css样式初始化. 通常使用一个常见的css初始化文件。 Bug类型 自身代码不规范带来的bug 例如：3个div布局，前两个是浮动的，第三个不是，在IE6/7是3个并排，在火狐是第三个消失隐藏掉了。 解决：给第三个加clear样式属性 float 双倍margin之bug 例如：某块级元素 float:left; margin-left的值是10px, 那么页面上IE6会解析为20px;同时 ,float:right, margin-right也会加倍 解决：设置漂浮元素的_display:inline，使IE6不再出现双边距; Bug类型 3像素bug及层叠差异 例如：两个box盒子，第一个有左浮动样式属性，第二个没有，则在IE6/7下是两个并排的盒子，并且IE6中间有3像素空隙，在火狐是一上一下只显示一个盒子（浮动盒子“盖”在非浮动盒子上） 解决：需要将两个盒子都设置左浮动样式属性。 父子级高度不同，儿子比父亲高，火狐是父级为准，IE6是子级为准 例如： 解决:父子设置相同高度，或IE6中设置overflow:hidden/scroll; div id=father div id=son/div /div Bug类型 在IE6中盒子高度的最小值只能是字体大小（比如通常设定的12px） 例如：我要设置一个高度是3px的div，则不会显示3px，还是12px 解决：font-size:1px;overflow:hidden; 注意 Margin 外边距有重叠效果 就是在竖直方向,当两个元素的外边距连在一块时,两者的距离并不是两者margin之和,而是取最大margin为准 对于浮动(float)的元素,外边距不存在重叠效果,也就是说:边距为两者的实际margin之和