一、图片下方间隙
1、给图片设置:vertical-align:top/middle/bottom
2、给图片转块:display:block;
3、给图片的父元素设置:font-size:0;line-height:0;(缺点:需要给子元素单独设置字号和行高
二、小高度问题
在ie6及以下版本出现
解决方法:
font-size: 0;
line-height: 0;
overflow: hidden;
三、双边距问题
Ie6及以下版本,给浮动元素设置margin-left,第一个浮动元素会出现双倍的间距
解决方法:
_display:inline;
四、块转内联块不在一行显示
Ie7及以下出现
解决方法:
*display:inline;
*zoom: 1;
五、父元素的溢出隐藏失效
在ie6和ie7两个版本里,给子元素设置相对定位,给父元素设置溢出隐藏,父元素的溢出隐藏会失效
解决方法:给父元素设置相对定位。
六、li和li之间的间隙
在ie7及以下会出现,li的里边有两个及以上子元素,并且给子元素设置浮动
解决方法:
在li身上设置
vertical-align: top/middle/bottom;
七、三角形
在ie5和ie6里,里面的transparent颜色会被识别成黑色
解决方法:
给设置成transparent的颜色对应的边框设置成虚线 dashed
八、图片外边框
在ie8及以下版本,图片外包裹a标签,图片外有边框
解决方法:
给图片设置:border:none/0;
九、给input标签去掉蓝圈(不是兼容性问题)
input{
outline: none;
}
网友评论