项目中的img标签:
本文是在项目中遇到img标签的相关问题,并且顺便重新总结了一下img标签相关只是和采坑的知识,以便日后学习和查阅。
问题与解决方法:
制作海报背景时由于特殊需要所以需要img标签作为背景使用。
项目页面结构为上下结构,上为tab切换不同背景。下为背景图片。
项目运行后在常见浏览器中打开显示没有问题,但是在微信浏览器中打开后发现,tab和背景图片中间有4个像素的留白缝隙。通过见检查并没有发现有border
或者margin
属性。最后解决办法是给img
标签设置css
样式,相对定位
,让图片在微信浏览器打开后向上移动top:-4px;
成功解决问题。
导致问题原因:
经过分析可能是由于微信自带浏览器兼容问题,导致页面中的各个元素之间的定位导致tab向下整体移动了。
img其它问题:
img 图像底部留白的原因以及解决方法
1、在有些浏览器中打开就会出现图像底部留白
原因:由于img元素默认为inline元素,而inline元素的vertical-align属性的默认值为baseline文字基线对齐,正好图片底部的留白就是baseline和元素下边界的距离,有的小伙伴可能不清楚vertical-align所一张图可能就明白了:
解决方法(亲测可用):
1、父元素设置font-size
2、img设置浮动、img改位块级元素、将元素的垂直对齐方式改为居中
div{
font-size: 0;
}
div img {
float: left;
display: block;
vertical-align: middle;
}
<div>
<img src="1.png">
<img src="2.png">
</div>
新年第一篇,有点晚,哈哈哈哈!!!欢迎交流前端知识,指正不足。