img标签在HTML5和HTML4.0.1的严格模式渲染的时候,下面会有几像素的空白,也就是常说的图片下方三像素的bug。
场景:一个div里面套一个图片,加一个遮罩层的效果就会显示这个问题。
原因:因为我们在编辑器里写代码的时候,同级别的标签不写在同一行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行符/空格间隙问题”。
解决办法
1.img标签的父标签增加font-size:0;
body{
font-size: 0;
}
2.img标签增加display:block;
img{
display:block;
}
3.img标签增加vertical-align: middle;
img{
vertical-align: middle;//或者vertical-align:top;
}
4.img标签增加float:left
img{
float:left;
}