请教多个div border设置1px并使用margin-top: -1px去除重叠会出现大于1px的线条

Question

在chrome下设置div的border为1px，用margin-top: -1px隐藏边框重叠，结果出现如下效果，请教这是什么原因产生的？

这是代码

<style>
    .table{
        width: 100%;
    }
    .line{
        border: 1px solid #000;
        margin-top: -1px;
    }
    .content{
        padding: 10px;
    }
</style>
<div class="table">
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>
    <div class="line">
        <div class="content">Hello, world.</div>
    </div>

</div>

Answer 1

看下电脑本身的设置，显示是不是百分之百，部分电脑默认是125%，会出现这种问题，改为100%就可以了。

Answer 2

用margin-top: -1px;边框重叠很正常，想要不重叠table 设置border 1px 然后line设置border-bottom 就行了

.table{
        width: 100%;
        border: 1px solid #000;
    }
.line{
   
    border-bottom: 1px solid #000;
}