html - 元素与其边界之间不需要的额外空间

Question

我想问一下是否可以帮助我解决以下问题：在下面的屏幕上，元素和边框之间有一个空格：

如果我将顶部位置更改为 0，它看起来像这样：

这个额外的空间出现在 Chrome 和 Opera 中，在 Firefox 中很好 这可能是由于浏览器中的计算不同。我的 Chrome 放大率为 100%，但如果我将放大率设置为 110%，则元素的显示很好（没有空格）

我想实现所有浏览器在 100% 放大时都没有空间。有没有办法用javascript或css做到这一点？

我尝试更改 css 属性，将显示从 flex 更改为块，更改元素及其子元素（页眉、页脚、内容）的框大小......但所描述的问题没有解决。

我可以改为创建边框宽度 boxshadow，也许可以用伪元素解决，但这不是我想要的。

.modal {
  position: absolute;
  top: 0px;
  left: 100px;
  width: 400px;
  height: 400px;
  font-family: Arial, Helvetica, sans-serif;
  border-style: solid;
  border-width: 30px;
  border-color: #000000;
  background-color: yellow;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  color: #ffffff;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  vertical-align: baseline;
  align-items: stretch;
}

.header,
.footer {
  padding: 0 10px 0 10px;
  background-color: orange;
  width: 380px;
  max-width: 100%;
  height: 40px;
  line-height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.content {
  background-color: #bd0bae;
  width: 400px;
  height: 320px;
  max-width: 100%;
  padding: 10px;
  overflow-x: auto;
  overflow-y: auto;
  flex-shrink: 0;
  flex-grow: 1;
  justify-content: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.header,
.footer,
.content {
  margin: 0;
  border-width: 0;
  border: none;
  border-style: none;
}

<div id="modal" class="modal">
  <div id="header" class="header">header</div>
  <div id="content" class="content">content</div>
  <div id="footer" class="footer">footer</div>
</div>

非常感谢您的任何评论。

标签： htmlcssflexbox