Chrome 边框下方空白 space

Question

让我们使用这个极其简单的 HTML/CSS 代码：

<html>
    <head>
        <style>
            body{
                margin:0
            }
            /* top div which height is set to 1px/5px/9px/13px...*/
            .first{
                height:5px
            }
            /* problematic atribute */
            .second.parent{
                border-top:1px solid red
            }
            /* background and height is set only to highlight my problem */
            .child{
                height:15px;
                background:black
            }
        </style>
    </head>
<body>
    <div class="first"></div>
    <div class="second parent">
        <div class="child"></div>
    </div>
</body>
</html>

在 Firefox 上一切正常：

不幸的是 Chrome 65 有问题 - 第二个 child 顶部的空白 space div:

Chrome 上的缩放屏幕截图（查看红色边框和黑色背景之间的白色）：

你知道我的问题是什么原因吗？

Answer 1

它的浏览器问题，但如果您使用 Em 或百分比，它可能会有所帮助

<html>
    <head>
        <style>
            body{
                margin:0
            }
            /* top div which height is set to 1px/5px/9px/13px...*/
            .first{
                height:0.3125em
            }
            /* problematic atribute */
            .second.parent{
                border-top:0.0625em solid red
            }
            /* background and height is set only to highlight my problem */
            .child{
                height:0.9375em;
                background:black
            }
        </style>
    </head>
<body>
    <div class="first"></div>
    <div class="second parent">
        <div class="child"></div>
    </div>
</body>
</html>

Chrome 边框下方空白 space

Blank space below the border on Chrome

html

css

google-chrome

border