关于前端开发过程中浏览器兼容问题
## IE6常见CSS解析BUG以及Hack解决方法
a) 默认高度:
- 在IE6以及以下版本中,部分块元素拥有默认高度(低于18px)
- Hack1:给元素添加声明:font-size:0;
- Hack2:给元素添加声明:overflow:hidden
b) 图片间隙:
- Div中的图片间隙(该bug出现在IE6以及更低版本中)
- 描述:在块元素中插入图片时,有时图片会将元素下方撑大三个像素;
- Hack:将转化为块状元素,给添加声明:display:block;
c) 双倍浮向(双倍边距):
- 描述:当IE6以及更低版本浏览器在解析浮动元素的时候,会错误的把浮向边的边界加倍显示。
- Hack:给浮动元素添加声明:display:inline;
d) 表单元素行高不一致(IE,MOZ,C,O,S)
- 描述:表单元素行高对齐方式不一致;
- Hack:给表单元素添加声明:float:left;
e) 按钮元素默认大小及样式不一致;
- Hack1:统一大小以及样式/(用a标记模拟)
- 如果这个按钮是一个图片,直接把图片作为按钮的背景图即可
f) 百分比bug
- 描述:在IE6以及以下版本中在解析百分比时,会按照四舍五入方式计算,从而导致50%加50%大于100%的情况。
- Hack:给右边的浮动元素添加声明:clear:right;意思:清除右浮动。
- Clear:left:清除左浮动
- Clear:both:清除两边的浮动。
g) 鼠标指针bug
- 如统一某元素鼠标指针形状为手状态,应添加声明:cursor:pointer;
h) 透明属性:
- IE浏览器写法:filter:alpha(opacity=数值);取值范围:1-100(IE8以下)
- 兼容其他浏览器的写法:opacity:数值(数值的取值范围0-1,0.1,0.2,0.3----,0.9)
i) 父元素里面有块元素,如果给子元素添加margin-top,父元素会下来
- Hack1:给父元素添加overflow:hidden;
- Hack2:给子元素添加float
- 给父元素加边框
统计了大概一部分的兼容问题,基本上都是兼容IE的较多,但是其实现在很多公司已经不再兼容IE了,也是仅供参考了解一下,毕竟IE作为windows强制绑定的浏览器,用户基数也是比较大的。