CSS Chrome - 无法使用 0px 高度（和上下边框）的 Div答案

【问题标题】：CSS Chrome - Div with 0px height (and top-bottom border) not possibleCSS Chrome - 无法使用 0px 高度（和上下边框）的 Div
【发布时间】：2018-05-05 00:00:09
【问题描述】：

我的 chrome 浏览器有问题。当我使用“div”和顶部和底部边框制作自定义“hr”标签时，边框之间有一条白色的 1px 线...... IE 和 Firefox 做得很好。

.nav_links_container_line {
    border-top: 1px solid #096ebd;
    border-bottom: 1px solid lightgrey;
}

<br><br><br><br>
<div class="nav_links_container_line"></div>

我尝试了不同的东西（溢出，高度 0px）但没有成功。我的 Chrome 浏览器是最新的（版本 62.0.3202.94）

谢谢西蒙

【问题讨论】：

当我在 Chrome 中查看您的代码并放大到 500% 时，这很好。线条之间没有间隙。
我正在使用 Chrome v62，这段代码运行良好。我也没有线条之间的差距。尝试刷新页面或使用隐身模式。

标签： html css google-chrome

【解决方案1】：

使用真正的<hr/> 怎么样？有了这个，我就没有你遇到的渲染问题了，实际上使用 hr 自己的角色更有意义。

.nav_links_container_line {
    border-top: 1px solid #096ebd;
    border-bottom: 1px solid lightgrey;
    border-left: none;
    border-right: none;
}

<br><br><br><br>
<div class="nav_links_container_line"></div>
<hr class="nav_links_container_line"/>

【讨论】：

【解决方案2】：

实际上这不是空白，您在底部使用了浅灰色，并连接了顶部和底部的边框，这是一种有白色空间的错觉。如果您想要自定义 hr 底部的阴影，那么您可以使用以下 css -

.nav_links_container_line {
border-top: 1px solid #096ebd;
box-shadow: 0px 2px 10px #000;

}

【讨论】：