Html CSS-放大/缩小时边框重叠

所以我有这个布局，每个盒子周围都有一个1px的边框。在这些框内，背景是一个渐变，顶部和底部都有1px的边框（使其看起来像一个按钮），但有时当我放大或缩小时，会在框的黑色边框和底部边框之间出现1px的白线，或者它会比容器大并超过黑色边框

下面是一些屏幕截图来说明我的意思： 我的代码是：

    .main-canvas-container {
    height: 1444px;
    width: 830px;
    margin: 0 auto;
    margin-top: 350px;
    position: relative;
    border: 1px solid #000;
}

.nav-container {
    height: 47px;
    width: 100%;
    border-bottom: 1px solid #000;
}

nav {
    height: 45px;
    width: 100%;
    border-top: 1px solid #808082;
    border-bottom: 1px solid #5f5f5f;
}

和HTML：

<div class="main-canvas-container">
<div class="nav-container">
<nav>
</nav>
</div><!-- nav-container -->
</div><!-- main-canvas-container -->

<div class="main-canvas-container">
<nav>
</nav>
</div><!-- main-canvas-container -->

---

现在尝试使用此用于

框大小

边框框

和定义高度

<47 px
，如下所示

nav{
  height:47px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

不用两个div，只需使用
border:2px start#000000

CSS将是：

.main-canvas-container {
    height: 1444px;
    width: 830px;
    margin: 0 auto;
    margin-top: 350px;
    position: relative;
    border: 1px solid #000;
}
nav {
    height: 47px;
    width: 100%;
    border: 2px outset #000000;
}

和HTML：

<div class="main-canvas-container">
<div class="nav-container">
<nav>
</nav>
</div><!-- nav-container -->
</div><!-- main-canvas-container -->

<div class="main-canvas-container">
<nav>
</nav>
</div><!-- main-canvas-container -->



这将解决缩放问题，并使
nav
看起来像一个按钮

一个非常简单的替代方法是从
.nav container
中删除
高度：47px
，这将使其调整到其子级（默认为
高度：auto；
）并随之缩放

这将解决您的问题，因为它直接连接到您的
47px
和
45px
div，并独立地重新计算到新的（缩放的）像素高度