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

Question

我在使用 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>

Answer 1

您的问题不在于框大小属性，边框不包括在边框框或内容框的计算中；您的元素的大小将始终随着您应用的边框的大小而增加。

如果您不想让元素变大，请不要添加边框。

如果你想要边框效果，而不需要边框的物理属性，那么我建议改用 box-shadow。用box-shadow创建边框效果很简单，而且不会增加应用它的元素的大小。

例如：

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

而不是：

border: 1px solid #333;

Answer 2

您只需添加隐藏边框即可实现您想要的效果。

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

.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: border-box - 如果之后更改边框，则不会保持大小

box-sizing: border-box - Size not maintained if border is changed afterwards

css

border-box

firefox-addon-webextensions