Question

我希望我的<fieldset>元素通过填充其包含元素并在设置为<div>时显示滚动条来表现得像香草overflow: auto。

例如，我不明白为什么this example中的字段集比其包含的div更宽：

<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;
}

Answer 1

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

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

样式表中的

setting min-width: 0;更正了Chrome 27，Safari 6.0.2和WebKit Nightly r146031中的问题。它无法解决Chrome 25和FireFox 19.0.2中的问题。

无论哪种方式，这都无法解决问题。

Answer 2

<fieldset>不会从父div继承宽度。 .inner div 执行继承宽度和shinks。您只需将width: inherit添加为.inner即可解决此问题。请注意，<fieldset>也可能会获得一些额外的填充和边距。

http://codepen.io/anon/pen/fxjek

Answer 3

要修复您的fieldset或将其设置为示例中的div，请添加以下css ::

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

你需要首先重置边距和填充，使其像下面的div一样，然后添加你想要的宽度：

.inner {    
    width:60px;    
}

Answer 4

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

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

我将此添加到您的CSS：

fieldset {
    margin:0 ;
    padding:0 ;
}

它解决了这个问题。如果要在fieldset版本之间留出间距和你的div，只需调整margin:元素。

如何制作字段集`display：block;溢出：auto`显示滚动条？

4 个答案: