为什么模态框标题周围有边框？

Question

出现在最新版本的 chrome 中 - 我错过了什么吗？我看不出这个边界的原因；它出现在元素的上方、左侧和最突出的右侧：

Fiddle

.header {
  width: 100%;
  background-color: #FFBF76;
  text-align: center;
  outline: none;
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  border: 3px solid #FFBF76;
  background: #FFF1BD;
  overflow: auto;
  border-radius: 0px;
  outline: none;
}

.modalBackground {
  position: fixed;
  inset: 0px;
  background-color: #00000066;
}

<div class="modalBackground">
  <div class="modal">
    <div class="header">
      My Header
    </div>
    <div>
      some content
    </div>
  </div>
</div>

编辑

尝试应用这两个建议，但效果有限。即使使用基于 flex 的新方法 (fiddle)，结果也是一样的。

Answer 1

您设置了一些无效/不必要的属性，让浏览器对其进行解释，这些属性可能会相应地呈现不同，例如 border-radius 将是 0 而不是 px，inset 不适用于固定位置元素，十六进制 color 只有 6 位数字（如果你想要一个不透明度的 alpha 通道，请改用 rgba）等。

无论如何，对您的示例进行了一些编辑，您应该不会再看到该问题，希望对您有所帮助。干杯！

.header {
  background-color: #FFBF76;
  text-align: center;
  margin: -1px; /* ensure no resize space */
}
.modal {
  border: 3px solid #FFBF76;
  background: #FFF1BD;
}
.modalBackground {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000066;
}

<div class="modalBackground">
  <div class="modal">
    <div class="header">
      My Header
    </div>
    <div>
    some content
    </div>
  </div>
</div>
<!-- <asd></asd> = not a valid element -->

Answer 2

问题是模态类上的transform: translate(-50%,-50%) translate3d(0,0,0);。为什么不为您的模态使用弹性显示？您不必依靠定位和变换技巧来使元素居中。

body {
  margin: auto;
}

.header {
  width: 100%; /* <-- removed, already a block level element */
  background-color: #FFBF76;
  text-align: center;
  outline: none;
}
.modal {
  /* position: absolute; <-- removed */
  /* left: 50%; <-- removed */
  /* top: 50%; <-- removed */
  /* transform-style: preserve-3d; <-- removed */
  /* transform: translate(-50%,-50%) translate3d(0,0,0); <-- removed */
  border: 3px solid #FFBF76;
  background: #FFF1BD;
  overflow: auto;
  /* border-radius: 0px; <-- no need to specify 0px, is by default */
  outline: none;
}
.modalBackground {
  /* position: fixed; <-- removed */
  display: flex; /* <-- added */
  justify-content: center; /* <-- added */
  align-items: center; /* <-- added */
  width: 100vw; /* <-- added */
  height: 100vh; /* <-- added */
  /* inset: 0px; <-- removed */
  background-color: rgba(0, 0, 0, 0.4) /* typo? #00000066*/ 
}

<div class="modalBackground">
  <div class="modal">
    <div class="header">
      My Header
    </div>
    <div>
    some content
    </div>
  </div>
</div>