图片连接处出现白线

2019-11-29 13:50:29

参考地址 CSS基本布局——去除图片连接处的白线


解决图片底部间隙问题


图片连接处出现白线


最近做移动端h5活动页,涉及到多图片拼接,遇到了一个坑就是图片连接处出现白线,当然查资料都说是img自身属性是inline-block导致,只要父元素设置font-size:0或者设置img display: block; 便可。但是我设置了没有用,这条线不是所有的机型都有,而且页面滚动之后又消失,我琢磨半天,各种尝试,发现把图片高度减少(增加)1px就解决了。因为我们的项目是用postcss-px-to-viewport,我每张图片都是设置高度的,应该是数值转换出现偏差。



  <main>

    <div class="content">

      <img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg">

      <img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg">

      <img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg">

    </div>

  </main>

1

2

3

4

5

6

7

图片本身没有白边,但在图片连接处出现了白边缝隙,而且设置img的属性

{margin:0;}也无法解决。



原来,img是内联块状元素,默认之间是存在缝隙的。要去除缝隙有两种方法:


1.设置font-size属性为0


.content {font-size:0}

1

2.设置img为block元素


img {display:block}

1

以上两种方法都可以。修改后的图片连接处白线消失。


关于更详细的原理见 这里



  • 2018-10-10 14:29:01

    php header()函数设置页面Cache缓存

    ​ header()函数在php的使用很大,下面我来介绍利用它实现页面缓存的一些方法,但使用header前必须注意,在它之前不能任何输出,包括空格。

  • 2018-10-11 23:58:07

    Linux实例带宽和CPU跑满或跑高排查

    使用云服务器 ECS 时,若出现服务的速度变慢,或 ECS 实例突然断开,可以考虑服务器带宽和 CPU 是否有跑满或跑高的问题。若您预先创建报警任务,当带宽和 CPU 跑满或跑高时,系统将自动进行报警提醒。Linux 系统下,您可以按如下步骤进行排查:

  • 2018-10-15 09:22:07

    使用epublib解析epub文件(章节内容、书籍菜单)

    前阵子在android上解析epub格式的书籍。发现了这个开源的epub解析库。相关资料甚少!折腾了一阵子,发现其实光使用的话还是挺简单的。真是萌萌哒~下面简单介绍一下epublib。