2

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

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

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

在此处输入图像描述
悬停时firstdiv的高度增加，增加整个页面的高度↑<BR>

如果这是相关的：

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

  • 我正在使用两个样式表，一个我无法修改 ( extension.css)，另一个用于扩展和覆盖第一个 ( page-small.css)。

  • 在受保护的 CSSdiv中覆盖的每个样式都应用一种样式，以允许元素随内容增长。height: 24pxmin-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>

4

2 回答 2

2

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

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

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

例如：

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

代替：

border: 1px solid #333;
于 2016-10-16T10:30:31.180 回答
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>

于 2016-10-16T10:41:26.037 回答