关于前端开发过程中浏览器部分兼容问题

关于前端开发过程中浏览器兼容问题

IE6常见CSS解析BUG以及Hack解决方法

a) 默认高度：

1. 在IE6以及以下版本中，部分块元素拥有默认高度（低于18px）

2. Hack1：给元素添加声明：font-size：0；

3. Hack2：给元素添加声明：overflow：hidden

b) 图片间隙：

1. Div中的图片间隙（该bug出现在IE6以及更低版本中）

2. 描述：在块元素中插入图片时，有时图片会将元素下方撑大三个像素；

3. Hack：将<img>转化为块状元素，给<img>添加声明：display：block；

c) 双倍浮向（双倍边距）：

1. 描述：当IE6以及更低版本浏览器在解析浮动元素的时候，会错误的把浮向边的边界加倍显示。

2. Hack：给浮动元素添加声明：display：inline；

d) 表单元素行高不一致（IE，MOZ，C，O，S）

1. 描述：表单元素行高对齐方式不一致；

2. Hack：给表单元素添加声明：float：left；

e) 按钮元素默认大小及样式不一致；

1. Hack1：统一大小以及样式/（用a标记模拟）

2. 如果这个按钮是一个图片，直接把图片作为按钮的背景图即可

f) 百分比bug

1. 描述：在IE6以及以下版本中在解析百分比时，会按照四舍五入方式计算，从而导致50%加50%大于100%的情况。

2. Hack：给右边的浮动元素添加声明：clear：right；意思：清除右浮动。

3. Clear：left：清除左浮动

4. Clear：both：清除两边的浮动。

g) 鼠标指针bug

1. 如统一某元素鼠标指针形状为手状态，应添加声明：cursor：pointer；

h) 透明属性：

1. IE浏览器写法：filter：alpha（opacity=数值）；取值范围：1-100（IE8以下）

2. 兼容其他浏览器的写法：opacity：数值（数值的取值范围0-1，0.1，0.2，0.3----，0.9）

i) 父元素里面有块元素，如果给子元素添加margin-top，父元素会下来

1. Hack1：给父元素添加overflow：hidden；

2. Hack2：给子元素添加float

3. 给父元素加边框

统计了大概一部分的兼容问题，基本上都是兼容IE的较多，但是其实现在很多公司已经不再兼容IE了，也是仅供参考了解一下，毕竟IE作为windows强制绑定的浏览器，用户基数也是比较大的。