避免css布局出错的一些方法.ppt

避免css布局出错的一些方法(不完全版) 设计组： 曹波 日 期： 2010年1月21日 div style=“width:210px;padding:10px;margin-right:10px;”/div 有固定宽高的标签，就不要出现margin或padding 1 div style=“float:left;width:210px;”/divdiv style=“float:right;width:70%;”/div Float元素务必指定width属性 2 ul li style=“float:left;width:150px;”/li li…/li /ul 引起的问题：没有任何理由的错乱 对比.htm .css以及javascript文件的编码，使其保持一至。 3 I. 检查一下有无拼写错误、是否忘记结尾的 } 等。II. 可以利用 W3C 验证工具。 检查CSS是否书写正确 4 div style=“width:400px” div style=“float:left;”/div !—我是注释 -- div style=float:left;width:400px这就是多出来的那只猪/div/div 注释引起的问题 5 快速定位页面中复杂css bug 只有快速的定位到问题，才能更好的解决问题。 弄错div的嵌套关系，是最经常出现的错误。解决方法：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。 检查HTML元素是否有拼写错误、是否忘记结束标记 1 从页面处着手，删除自身以及周边模块。 模块删除大法 2 I. 外链N个css文件的，可以逐个删除，以确定是那个文件出现问题。II. 对于单个css文件可以有顺序的大面积删除，直至定位到问题代码。 Css样式删除大法 3 此方法最为常用，屡试不爽，经济实惠。 增加背景颜色，以确定问题产生的原因 4 很多bug的产生，都和未清除浮动有关（ff下尤其重要）养成良好的清除浮动的习惯 别忘记clear:both 5 只要你代码写的足够标准，Hack应用实际根本没必要。 css hack 应用 6 background:red !important; /* Firefox ,ie7,ie8*/ _background:red ; /* ie6*/ *background:red ; /* ie6,ie7*/ !--[if IE 6] link rel=stylesheet href=style_ie6.css type=text/css / ![endif]-- 总结： 1. 善用工具 2. 善于搜索 3. 养成良好的 编码习惯 4. 减少无用的标签及样式，尽量语义化，符合标准。 5. 勤于总结很多的问题其实是我们自己给自己设置的障碍；让知识和经验沉淀下来，为了自己的成长。 补充一点 祝大家：远离bug 工作愉快！