box-sizing:border-box - 如果之后更改边框，则不保持大小答案

【问题标题】：box-sizing: border-box - Size not maintained if border is changed afterwardsbox-sizing:border-box - 如果之后更改边框，则不保持大小
【发布时间】：2016-10-16 18:41:26
【问题描述】：

我在使用 box-sizing: border-box 时遇到了问题：我有 3 个 div 大小为 min-height: 24px 我想在添加水平边框时保持高度。

问题在于，如果在计算一次内容高度之后添加水平边框，则内容高度不会改变，div 会随着边框的值而增长。

在我的例子中，当元素悬停时，边框是由 CSS 本身添加的。

_{悬停时第一个div的高度增加，增加整个页面的高度} ↑

如果这是相关的：

页面实际上在Firefox webextension中用作弹出窗口。
我正在使用两个样式表，一个无法修改 (extension.css)，另一个用于扩展和覆盖第一个 (page-small.css)。
对每个div 应用一种样式，以用min-height: 24px; 覆盖受保护的CSS 中的height: 24px，以允许元素随内容增长。

当元素悬停时，如何在不改变外部尺寸的情况下管理这种增长？

.no-wrap {
  white-space: nowrap;
}
.addl-text {
  padding-left: 1em;
}
.start {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#col-1 {
  max-width: 300px;
}
#pli-1,
#pli-2,
#pli-3 {
  height: unset;    /* Want to cancel effect of...        */
  min-height: 24px; /* ...'height: 24px' in extension.css */
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://hg.mozilla.org/mozilla-central/raw-file/4f41a072c0ca/browser/components/extensions/extension.css">
  <link rel="stylesheet" href="page-small.css">
</head>

<body>
  <div id="col-1" class="panel-section">
    <fieldset class="panel-section-list">
      <legend>Checkboxes</legend>
      <div id="pli-1" class="panel-list-item">
        <div class="start">
          <input id="c11" type="checkbox">
          <label class="no-wrap" for="c11">Test</label>
          <label class="addl-text" for="c11">Voluptate nisi expe tendis eiusmod firmissimum de cillum nam eiusmod firmis simum expetendis, ipsum offendit.</label>
        </div>
      </div>
      <div class="panel-section-separator"></div>
      <div id="pli-3" class="panel-list-item">
        <input id="c12" type="checkbox">
        <label class="no-wrap" for="c12">Test</label>
      </div>
      <div id="pli-2" class="panel-list-item">
        <input id="c13" type="checkbox">
        <label class="no-wrap" for="c13">Test</label>
      </div>
    </fieldset>
  </div>
</body>

</html>

【问题讨论】：

标签： css firefox-addon-webextensions border-box

【解决方案1】：

你可以通过简单地添加一个隐藏的边框来实现你想要的。

为项目添加隐藏边框（白色），这样高度就不会增加。就像在 sn-p 中一样。

.panel-list-item:not(.disabled) {
    border: 1px solid #fff;
}

您可能还想调整其他样式来修复问题。

.panel-list-item:not(.disabled) {
    border: 1px solid #fff;
}

.no-wrap {
  white-space: nowrap;
}
.addl-text {
  padding-left: 1em;
}
.start {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#col-1 {
  max-width: 300px;
}
#pli-1,
#pli-2,
#pli-3 {
  height: unset;    /* Want to cancel effect of...        */
  min-height: 24px; /* ...'height: 24px' in extension.css */
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://hg.mozilla.org/mozilla-central/raw-file/4f41a072c0ca/browser/components/extensions/extension.css">
  <link rel="stylesheet" href="page-small.css">
</head>

<body>
  <div id="col-1" class="panel-section">
    <fieldset class="panel-section-list">
      <legend>Checkboxes</legend>
      <div id="pli-1" class="panel-list-item">
        <div class="start">
          <input id="c11" type="checkbox">
          <label class="no-wrap" for="c11">Test</label>
          <label class="addl-text" for="c11">Voluptate nisi expe tendis eiusmod firmissimum de cillum nam eiusmod firmis simum expetendis, ipsum offendit.</label>
        </div>
      </div>
      <div class="panel-section-separator"></div>
      <div id="pli-3" class="panel-list-item">
        <input id="c12" type="checkbox">
        <label class="no-wrap" for="c12">Test</label>
      </div>
      <div id="pli-2" class="panel-list-item">
        <input id="c13" type="checkbox">
        <label class="no-wrap" for="c13">Test</label>
      </div>
    </fieldset>
  </div>
</body>

</html>

【讨论】：

谢谢，这是对我的问题的一个很好的回答，但它看起来也像是绕过。 box-sizing 行为在 Firefox (49) 中是否真的有问题？
没有。我认为box-sizing 在任何最新的浏览器中都没有问题。您的问题是预期的行为。当您在没有任何边框的 div 上添加边框时，高度将增加以包含该边框。要消除闪烁，您必须这样做。那不是绕道。 :)。或者你也可以添加 box-shadow 来获得效果。如果答案有帮助，请将其标记为已接受，以帮助未来的访问者。

【解决方案2】：

您的问题不在于 box-sizing 属性，border-box 或 content-box 的计算中不包括边框；你的元素的大小总是会随着你应用的边框的大小而增加。

如果您不希望元素增大尺寸，则不要添加边框。

如果你想要一个边框效果，没有边框的物理属性，那么我建议使用 box-shadow 代替。用 box-shadow 创建边框效果很简单，并且不会增加它所应用的元素的大小。

例如：

box-shadow: inset 0 0 1px #333;

代替：

border: 1px solid #333;

【讨论】：

我不明白您所说的“边框不包含在计算中”是什么意思，因为box-sizing: border-box 实际上被定义为“宽度和高度属性（以及min/max 属性）包括内容、填充和边框”（source）。
这也让我很困扰。对它所做的事情的描述有点误导。如果你的元素没有明确的高度，它会改变元素的高度，因为没有高度需要计算。它真正的意思是我们会将边界考虑到您给我们的高度，如果您不提供高度，我们将不会计算任何东西。