Question

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

问题是如果在之后添加水平边框内容高度已经计算过一次，那么内容高度不会改变，div增长的值会增加边界。

在我的情况下，当元素悬停时，CSS本身会添加边框。

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

如果这是相关的：

该页面实际上用作Firefox webextension中的弹出窗口。

我正在使用两个样式表，一个我无法修改（extension.css），另一个用于扩展和覆盖第一个（page-small.css）。
< / LI>

div中的每一个都应用了一种样式，以便height: 24px覆盖受保护CSS中的min-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-sizing属性，边框不包括在border-box或content-box的计算中;元素的大小总是会增加你应用的边框的大小。

如果您不希望元素增加，请不要添加边框。

如果你想要一个边框效果，没有边框的物理属性，那么我建议改用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 - 如果之后更改了边框，则不会保留大小

2 个答案: