《精通CSS（第二版）》备忘录 -- BUG和修复BUG

BUG和修复BUG

• CSS编辑器：SKEdit，CSS Edit。
• 语法错误检查：Css Validator, FF:Web Developer Toolbar , HTML Validator for Firefox
• 特殊性问题：规则应用于一个元素时，没有任何效果
• 外边距叠加：如果元素没有垂直边框或内边距，那么它的高度为它包含的子元素的顶部与底部边框边缘之间的距离。 解决：添加垂直边框或内边距，且元素的高度为其包含的子元素的顶部与底部外边距边缘之间的距离。 工具：Web Developer Toolbar的topographic视图，Firebug的layout视图。
• 页面标准模式，开发浏览器先使用FF，连续测试。
• 只在绝对必须的情况下才使用hack。
• 隔离问题的方法：
  • a.在相关元素上应用边框或轮廓，检测外边距叠加问题。
  • b.尝试修改几个属性。
  • c.使bug效果扩大化。
  • d.常见解决方案，positon:relative;display:inline。
• CSS社区：CSS-Discuss\Web Standards Group\Stackoverflow
• IE布局：这个布局就是坑爹用的，IE特有，必须考虑！hasLayout属性参考资料： On Having Layout
• IE条件注释
• 过滤器：应该使用依赖于不被支持的CSS过滤器。 
  • * HTML{width:1px;}
  • 子选择器：html>body{...} ； IE6及以下版本不支持子选择器>,会忽略这一规则。
• 常见BUG：
  • IE6及更低版本的 双外边距浮动 -》设置display:inline即可解决。
  • 3像素文本偏移：文本与浮动元素相邻时-》给文本元素设置任意高度，使其拥有布局；应使用条件注释将其转移到单独=的CSS文件中；针对IE6及-重新设置外边距为0；浮动元素上设置-3px右外边距；若浮动元素是图像，IE5.X在图像的左右都添加3px见习，而IE6不改变图像的外边距。最终结果如下：
    • p{height:1%;margin-left:0;}  .myFloat{margin-right:-3px;}    <!--IE5-->
    • p{height:1%;margin-left:0;}  .myFloat{margin-right:0;}    <!--IE6-->
  • IE6重复字符：当一系列浮动元素的第一个和最后一个元素之间有多个注释时出现-》删除注释！
  • IE6“藏猫猫”BUG：一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素包含在一个设置了背景颜色或图像的父元素中。-》方法1：去掉父元素上的背景颜色或图像；方法2：避免清理元素与浮动元素接触；方法3,：容器元素固定尺寸；方法4:浮动元素和容器元素position:relative;
  • IE6及更低的 相对容器中的绝对定位：相对定位的元素没有货的内部的hasLayout属性-》迫使相对定位的容器拥有布局：方法1.容器上显式高度和图案度；方法2.条件注释过滤IE5\IE6，为容器布局提供任意一个高度，更好.container{height:1%;}
• 分级浏览器支持：分级支持表（文章中的分级支持表比较古老，需要更新！！）