如何使一个 `display: block; overflow: auto` 的 fieldset 显示滚动条？

Question

我希望我的<fieldset>元素能像普通的<div>一样，填满它们所在的容器，并在设置为overflow:auto时显示滚动条。

例如，在这个例子中，我不明白为什么

比其包含的

更宽：

<div class=outer>
  <fieldset class=inner>
      fooooooooooooooooooooooooooooooooooooo
  </fieldset>
</div>

<div class=outer>
  <div class=inner>
    fooooooooooooooooooooooooooooooooooooooo
  </div>
</div>

以及相应的CSS：

.outer {
  width: 60px;
}

.inner {
  overflow: auto;
  display: block;
  height: 60px;
  border: 1px solid red;
}

- aaronstacy

Answer 1

事实证明，罪魁祸首（在某些情况下）是Webkit中的用户代理样式表设置为：

fieldset {
  min-width: -webkit-min-content;
}

在样式表中添加 min-width: 0; 可以解决Chrome 27、Safari 6.0.2和WebKit Nightly r146031的问题。但在Chrome 25和FireFox 19.0.2中无法解决该问题。

无论如何，这并不能解决问题。

- aaronstacy

---

@aaronstacy：你不能接受你的答案；-)因为它在Firefox中不起作用。 - Walter Tross

@ExplosionPills 这在我的Chrome浏览器中确实有效，它们的宽度是相同的，除了fieldset元素的UA样式表定义的边距/填充。 - aaronstacy

@WalterTross 是的，我现在正在仔细研究它。 - aaronstacy

@ExplosionPills 我在 Chrome 27、Safari 和 WebKit Nightly 版本中都看到它可以工作，但你说得对，在 Chrome 25（稳定版）上无法运行。至少在 Mac OS X 上是如此。我也想不出在 FireFox 上使其工作的方法。这太愚蠢了。我可能会接受你的答案，但在我的应用程序中只使用 <div class=fieldset> 就好了。 - aaronstacy

Answer 2

不会从父 div 继承宽度。 .inner div 继承宽度并缩小。只需在 .inner 中添加 width: inherit 规则即可解决此问题。请注意，<fieldset> 可能还会获得一些额外的填充和边距。 http://codepen.io/anon/pen/fxjek

- Explosion Pills

---

默认情况下，宽度不会被任何元素继承。div.inner 被 限制 在其父元素的宽度内，但它本身并没有从其父元素 继承 width: 60px。此外，在 Firefox 上指定 width: inherit 似乎没有任何区别。 - BoltClock

@BoltClock 或许不是默认的，但你能解释一下 .inner div 没有任何额外规则时宽度为58px的行为吗？ - Explosion Pills

@Boltclock，为什么fieldset没有被限制？ - Explosion Pills

@aaronstacy，你的解决方案在Chrome中对我无效。我在Chrome中也看不到min-width规则。 - Explosion Pills

@ExplosionPills 抱歉，在看到我的回答之前我已经评论了。我会在上面继续讨论。 - aaronstacy

Answer 3

要修复您的fieldset或使其像您示例中下面的div一样，请添加以下CSS：

fieldset{
  margin:0px;
  padding:0px
}

你需要先重置边距和内边距，让它们像下面的 div 一样，然后再添加所需的宽度：

.inner {    
    width:60px;    
}

- ebram khalil

---

问题是我希望fieldset的行为像div一样，可以扩展到其包含元素的宽度。 - aaronstacy

Answer 4

Fieldset 版本比 div 版本宽的原因是，除非您另行指定，否则 fieldset 具有自己的默认填充。

请参见：http://jsfiddle.net/RDVY7/

我在您的 CSS 中添加了以下内容：

fieldset {
    margin:0 ;
    padding:0 ;
}

它已经解决了这个问题。如果您想在fieldset和div之间添加间距，只需调整margin：元素即可。

- Cynthia

---

在我提供的 CodePen 中，fieldset 比 div 大得多。这不仅仅是一个 margin/padding 问题，而是因为 div 被夹在其包含元素中，而 fieldset 正在超出它。您可以通过在 Firebug 或 Chrome 开发工具中检查元素来看到它远远超过了 margin/padding。 - aaronstacy