关于前端开发过程中浏览器兼容问题
IE6常见CSS解析BUG以及Hack解决方法
a) 默认高度:
-
在IE6以及以下版本中,部分块元素拥有默认高度(低于18px)
-
Hack1:给元素添加声明:font-size:0;
-
Hack2:给元素添加声明:overflow:hidden
b) 图片间隙:
-
Div中的图片间隙(该bug出现在IE6以及更低版本中)
-
描述:在块元素中插入图片时,有时图片会将元素下方撑大三个像素;
-
Hack:将<img>转化为块状元素,给<img>添加声明: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强制绑定的浏览器,用户基数也是比较大的。
网友评论