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

Question

所以我的这个布局在每个框中都有一个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 -->

Answer 1

一个非常简单的替代方法是从height: 47px移除.nav-container，这会使其适应其子级（默认为height: auto;）并随之缩放/缩放。

这应该可以解决您的问题，因为它会直接连接到您的47px和45px div，从而相互独立地重新计算到新的（缩放的）像素高度。

DEMO

Answer 2

现在尝试使用用于box-sizing border-box和定义 height 47 px，就像这样

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

<强> Demo

Answer 3

您可以使用border: 2px outset #000000

，而不是使用两个div

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">
<nav>
</nav>
</div><!-- main-canvas-container -->

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

Demo