为什么使用CSS overflow: hidden属性后会出现多余空白？如何解决？

解决方案 #

这个空白是浏览器对带圆角的容器执行overflow: hidden裁切时，抗锯齿渲染导致的半像素漏白，你可以任选下面一种方法修复：

• 方案1（最简便，无兼容问题）：调整红色遮罩条的位置和宽度，覆盖住间隙，修改#sublink-container span的样式如下：

#sublink-container span{
    width: 23px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -1px;
    background: red;
}

• 方案2：给父容器触发GPU渲染提升裁切精度，在#sublink-container的样式中新增一行：

#sublink-container{
    /* 原有样式不变，新增下面一行 */
    transform: translateZ(0);
}

• 方案3（从根源避免问题）：移除父容器的白色背景，把背景加在内部内容区域，就不会出现漏白：

/* 去掉父容器的background */
#sublink-container{
    background: transparent;
    /* 其余原有样式不变 */
}
/* 给内部内容块加背景和对应边距 */
#sublink-container > div{
    background: #fff;
    padding: 0 50px;
}

内容的提问来源于stack exchange，提问作者Efe FRK