公告列表
公告列表
收藏
回答

图片拼接白线问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug image 组件 客户端 6.7.3 2.4.2

- 当前 Bug 的表现（可附上截图）


产品页的图片之间有白线，图片已经使用了 `display:block` 及 `font-size:0` 都不管用。以下是截图，为避免官方无法复现，一并附上视频演示地址：http://img06.ichuye.cn/wxapp/feedback/image-line.mp4





- 复现路径


代码片段是无法复现的（因为无法真机预览），只在部分真机上会复现这个问题，我这里复现的手机有 MIX，iPhone7。


- 提供一个最简复现 Demo


所有代码如下：


<view style="font-size:0;">
    <image style="display: block;width:100%;font-size:0;" lazy-load src="http://img06.ichuye.cn/wxapp/calendar/product/yue4.jpg" mode="widthFix"></image>
    <image style="display: block;width:100%;font-size:0;" lazy-load src="http://img06.ichuye.cn/wxapp/calendar/product/yue5.jpg" mode="widthFix"></image>
    <image style="display: block;width:100%;font-size:0;" lazy-load src="http://img06.ichuye.cn/wxapp/calendar/product/yue6.jpg" mode="widthFix"></image>
</view>


手动@官方大大 告知一个解决方案，如果是一个兼容性问题希望加入修复的进度中……

https://developers.weixin.qq.com/s/qpoxQMmz7S4p
最后一次编辑于  2018-12-20
回答关注问题邀请回答
收藏

8 个回答

  • 画风
    画风
    2019-01-15

    遇到同样问题，图片拼接，一行显示三个图，或四个图。 应该和 图片宽度(px) * pixelRatio的值不是整数有关系，待解决。

    2019-01-15
    有用 3
    回复
  • 俞
    俞
    10-15

    margin-bottom: -1px;

    完美解决

    10-15
    有用 1
    回复
  • 你是人间四月天
    你是人间四月天
    2022-07-18

    2022-07-18
    有用
    回复 2
    • 你是人间四月天
      你是人间四月天
      2022-07-18
      /* 商品详情图样式 */
      .pro_detailImg{
        width:100%;
        font-size: 0; //父元素加上font-size:0;
      }
      .pro_detailImg img{
        width:100%;
        height:auto;
        display:block; //将图片设置成块元素
      }
      2022-07-18
      赞
      回复
    • 俞
      俞
      10-15
      margin-bottom: -1px;
      完美解决
      10-15
      赞
      回复
  • 三个石头1850204
    三个石头1850204
    2020-08-07

    这个问题好解决

    2020-08-07
    有用
    回复 1
    • co
      co
      2020-08-13
      真机上也没有问题吗？怎么解决的？
      2020-08-13
      赞
      回复
  • 哄哄
    哄哄
    2019-11-04

    楼主怎么解决呢？

    2019-11-04
    有用
    回复 2
  • 咬咬零
    咬咬零
    2019-08-07

    请问问题解决了吗？


    2019-08-07
    有用
    回复
  • WANGZHENG
    WANGZHENG
    2019-07-26

    最后解决了吗

    2019-07-26
    有用
    回复 1
    • 画风
      画风
      2019-07-26
      官方是否解决不知道。这边是用图片宽度(px) * pixelRatio的值取整，来解决的，不是理想办法，最后会有空余。
      2019-07-26
      赞
      回复
  • 2018-12-19

    vertical-align: top;


    2018-12-19
    有用
    回复 1
    • co
      co
      2018-12-20

      试过没用。

      2018-12-20
      赞
      回复
请 登录 后发表内容
相关问题
相关文档