Question

让我们来看看这个非常简单的HTML / CSS代码：

＆＃13;

<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>

＆＃13;

Firefox上的一切看起来都很好：

不幸的是，在Chrome 65上存在一个问题 - 第二个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上边框下方的空白区域

1 个答案: