Html前端Bug之美【简约版】

1. bug1 默认高度 在IE6以下的版本中部分块元素拥有默认高度为19px为临界值
   hack1:给元素添加声明：font-size:0;
   hack2:给元素添加声明：overflow：hidden;

   1. bug2 图片间隙 在IE6以下的版本中 在div中插入图片 图片有时候会将下方撑大3px (随着所有浏览器的更新，他们中的bug也在改变；)
      hack1:将</div>与img写在一行上；
      hack2:将<img>转为块状元素 声明img{display:block;}
      B 在dl li中图片的间隙
      hack1：声明img{display:block;}
      hack2：给li添加成图片的高度；并overflow：hidden
   2. bug3 双倍浮向（双倍边距） 该块状元素在一个方向既有浮动又有margin
      描述：当IE6及更低的版本浏览器在解析浮动时会错误的把浮向边的边界加倍显示
      hack:给浮动元素添加display：inline;
   3. 表单行高对齐方式不一致
      hack:float：left;

   4. bug5 按钮大小不一致以及样式不一致
      hack1:统一大小样式（用a标签代替）
      hack2:input外嵌套一个标签，在这个标签里写按钮的样式。把input样式去掉
      hack3:把图片作为按钮的背景

   5. -bug6 百分比的bug 当两个元素的宽度都为50% 在IE7以下的浏览器会默认的四舍五入
      hack：给右边的浮动元素添加声明：clear:right;
   6. bug7 pointer IE6以下的默认颜色不一致
      hack: cursor: pointer;
   7. bug8 透明属性 IE兼容写法： filter: alpha(opacity=100) /参数值1-100/; opacity:0.1 /参数值0-1)/
   8. bug9 当li里 的a声明为display：block;时或者float时出现行高不一致时，底部有时会多出3px;
      hack:给li设置宽度且让其浮动
   9. bug10 当li加float属性,且a属性为：display：block；height：XXpx时；IE6里会出现每个li单独占据一行或阶梯的情况；
      hack1:不给a加高度；
      hack2:给a也加浮动
   10. bug11 父元素里有块元素，如果给子元素添加声明，margin-top的话父元素也会下来
       hack1:给父元素加边框（不提倡）；
       hack2：给父元素添加padding-top;
       hack4:给父元素添加overflow：hidden；
       hack3:给子元素添加浮动；