常见的css bug和css hack

1 图片间隙

图片与图片间距

hack:　　img{float:left;}

图片与父元素在垂直方向上有几个间距

hack：将<img />转为块状元素，display:block;

2 dt,li中图片间隙

　　hack：将img转为块级元素，给img添加声明:display:block;

3 双倍浮向（双倍边距）　　（只有IE6有）

　　描述：在IE6中，一个居左（或居右）浮动元素放置进一个容器盒（box），并在浮动元素上使用了左边距（或右边距）在IE6内便产生双倍边距。

hack: 给浮动元素添加声明：display:inline;

4 图片字IE浏览器上有蓝色的边框（加在a标签里）

hack：给img的边写成0, img{border:0}

5 默认高度（IE6、IE7）

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

　　hack1：给元素添加声明，font-size:0;

　　hack2： 给元素添加声明，overflow:hidden;

6 表单元素距离顶部间距不一致（IE，MOZ，Chrome，Opera，Safari）

　　描述：表单元素距离顶部的距离不一致

　　hack：给表单元素添加声明：float:left;

7 按钮元素默认大小不一

　　描述：个浏览器中按钮元素大小不一致

　　hack1：统一大小（用a标记模拟）

　　hack2：input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉，border:none;或border:0;

8 百分比bug

　　描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式机损从而导致50%加50%大于100%的情况（也会受系统影响）

　　hack：给右面的浮动元素添加声明：clear:right;

9 鼠标指针bug

　　描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明

　　hack：如统一某元素鼠标指针形状为手型，添加声明：cursor:pointer;

10 子元素没设置任何浮动，设置了mrgin-top属性后，会错误的把margin-top的属性值添加给父元素

　　hack1：给父元素添加overflow:hidden;

　　如果给子元素设置了浮动属性不会出现问题

11 当给li中的a转成block；并且有height，并有设置了float属性时，li中没设置浮动会出现阶梯显示

　　hack：同时给li加float；

转载于:https://www.cnblogs.com/glmkeep/p/11360520.html