CSS - Borders overlapping on zoom in/out

Question

So I have this layout with a 1px border all around every box in it. Inside these boxes the background is a gradient with a 1px border on top and bottom (to make it look like a button) but sometimes when I zoom in or out this breaks, either I get a 1px white line between the black outline and the bottom border of the box or it becomes bigger than the container and surpasses the black outline.

Here are some screenshots to show what I mean: My code being:

    .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;
}

And HTML:

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

Answer 1

One very simple alternative is to remove height: 47px from .nav-container which will make it adjust to its child (as it defaults to height: auto; ) and scale/zoom with it.

This should fix your problem, as it was directly connected to your 47px and 45px divs getting recalculated to new (scaled) pixel heights independently from each other.

DEMO

Answer 2

now try to this Used to box-sizing border-box and define height 47 px as like this

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

Demo

Answer 3

Instead of using two divs, you could just use border: 2px outset #000000

CSS would be:

.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;
}

And HTML:

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

This should fix the zooming problem and keep the nav looking like a button.

Demo