缩放时子 div 背景颜色不适合父 div

Question

根据浏览器的缩放级别，子 div 的背景颜色有一个奇怪的行为。出现一些空白。

请参阅以下示例：

缩放 125%：

缩放 150%：

缩放 175%：

缩放 200%：

这是我的代码：

（JSFiddle：https ://jsfiddle.net/3L4wfvyg/ ）

$(document).ready(function () {
    document.getElementById("HeaderContainer").addEventListener("click", function (e) {
        if (e.target.id != "FormContainer") {
            document.getElementById("Container3").classList.toggle("clicked");
            document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
        };
    });
});

.Container1 {
  background-color: white;
  line-height: 30px;
  font-size: 20px;
  color: black;
  border: none;
  position: absolute;
}

.Container1 h3 {
  font-size: 30px;
  color: #142D41;
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative;
}

.Container1 .Container3 {
  padding: 30px;
  display: block;
  border: 1px solid black;
  border-radius: 5px;
  margin-top: 15px;
  font-size: 15px;
  min-width: 100%;
  background-color: white;
  text-align: left;
  height: 100px;      
  overflow: hidden;
}
.Container1 .Container3:hover {
  text-decoration: none !important;
  cursor: pointer;
}            

.HeaderContainer3:hover {
  color: white !important;
  background-color: blue;
}

.HeaderContainer2 {
  padding: 30px;
}

.HeaderContainer1 {
  z-index: 10;
  position: relative;
  margin: -31px;
  padding: 32px 30px 25px 30px;
  width: auto;
}

.FormContainer {
  font-size: 20px !important;
}

#Container3 {
  height: 0px;
  transition: height 300ms ease-in-out;
  box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}

#Container3.clicked {
  height: 314px;
}

.Header {
  position: relative;
  padding-top: 6px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
  <h3>Title
  </h3>
  <div class="Container2">

    <div id="Container3" class="Container3">
      <div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
        <div class="Header">Header</div>
      </div>
      <div id="FormContainer" class="FormContainer">
        <hr />
        <div style="padding: 5px 0px 8px 0px;">
          Form
        </div>
        <br />
        <div id="FormElementsContainer" class="FormElementsContainer">
          <div>
            <b>First</b>
            <br />
          </div>
          <div>
            <b>Last</b>
            <br />
          </div>
          <div>
            <b>Third</b>
            <br />
          </div>
          <div>
            <br />
            <button>
              Submit
            </button>
          </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

为什么会发生这种情况，我该如何解决问题？

当我从 Container3 中移除边框时，似乎问题不再发生，但我不知道这是不是因为由于白色，很难看出问题是否仍然存在。

Answer 1

我将边框大小更改为 0.0125em。（这很奇怪，但有效！）。

.Container1 .Container3 {                                           
   border: 0.0125em solid black;                                          
 }