父div与子div间空白无法移除，移动端Bug求助

你遇到的这种仅在移动端出现的父子div间空白线条，大概率是浏览器渲染机制的差异导致的，以下是几种实测有效的解决办法：

• 给父元素添加overflow: hidden
  强制浏览器重新计算父元素内部布局，消除潜在的渲染间隙：

  .parent {
    border: 2px solid #000;
    height: 80px;
    overflow: hidden;
  }
  
  .child {
    height: 80px;
    background-color: #000;
  }
  

• 重置父元素的line-height
  部分浏览器会继承默认行高，导致微小间隙，重置后即可解决：

  .parent {
    border: 2px solid #000;
    height: 80px;
    line-height: 0;
  }
  
  .child {
    height: 80px;
    background-color: #000;
  }
  

• 显式声明子元素为块级元素
  虽然div默认是块级元素，但显式声明能规避部分浏览器的渲染异常：

  .parent {
    border: 2px solid #000;
    height: 80px;
  }
  
  .child {
    height: 80px;
    background-color: #000;
    display: block;
  }
  

• 重置父元素的font-size
  父元素默认字体大小可能产生微小布局间隙，重置后可消除：

  .parent {
    border: 2px solid #000;
    height: 80px;
    font-size: 0;
  }
  
  .child {
    height: 80px;
    background-color: #000;
    font-size: 16px; /* 若子元素有文字，需恢复字体大小 */
  }
  

内容的提问来源于stack exchange，提问作者Max Himes