youzan / vant-weapp

轻量、可靠的小程序 UI 组件库
https://vant.pro/vant-weapp/
MIT License
17.68k stars 3.48k forks source link

[Bug Report] `van-image` 底部多出 4px #5886

Open GF-Huang opened 1 week ago

GF-Huang commented 1 week ago

重现链接

<view class="order-list-container">
  <view class="order-list-item round-border" wx:for="{{orders}}" wx:key="*this">
    <van-image src="随便一张图片" fit="fill" radius="10rpx" custom-class="order-img" />
  </view>
</view>
.order-list-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx;
}

.order-list-item {
  padding: 20rpx;
  background-color: white;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20rpx;
}

.order-img {
  width: 200rpx;
  height: 200rpx;
}

.round-border {
  border-radius: 10rpx;
  overflow: hidden;
}

Vant Weapp 版本

1.11.6

描述一下你遇到的问题。

图片下方多了4px空白。

image image

里面的 shadow-root 是正常的,不知道为什么。

image

重现步骤

如上所述。

设备/浏览器

微信开发者工具1.06.2407120 和 iOS 真机

gin-18 commented 1 week ago

.order-list-item 这个类名加上 font-size: 0 就可以了。

MAY-ZHONGYE commented 5 days ago

行内块的原因,font-size:0 或者 vertical-align:middle