4

含まれている要素を塗りつぶし、に設定されているときにスクロールバーを表示することで、<fieldset>要素がバニラのように動作するようにします。<div>overflow: auto

たとえば、この例のフィールドセットが含まれている 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;
}
4

4 に答える 4

7

犯人は（場合によっては）webkitのユーザーエージェントスタイルシートが設定していたことが判明しました：

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

スタイルシートの設定min-width: 0;により、Chrome 27、Safari 6.0.2、およびWebKitNightlyr146031の問題が修正されました。Chrome25およびFireFox19.0.2の問題を修正できません。

いずれにせよ、これは問題を解決しません。

于 2013-03-18T13:55:26.033 に答える
2

<fieldset>親 div から幅を継承しません。.innerdivは幅とシンクを継承します。width: inheritこれは、ルールとして に追加するだけで解決できます.inner。<fieldset>追加のパディングとマージンが得られる場合があることに注意してください。

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

于 2013-03-18T13:59:14.227 に答える
0

を修正するfieldsetかdiv、例で以下のようにするには、次のcssを追加します。

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

最初にマージンとパディングをリセットして、その下のdivのように機能させてから、必要な幅を追加する必要があります。

.inner {    
    width:60px;    
}
于 2013-03-18T13:56:45.397 に答える
0

フィールドセットのバージョンがdivのバージョンよりも広い理由は、特に指定しない限り、フィールドセットには独自のデフォルトのパディングがあるためです。

参照： http： //jsfiddle.net/RDVY7/

これをCSSに追加しました：

fieldset {
    margin:0 ;
    padding:0 ;
}

そしてそれは問題を修正しました。フィールドセットバージョンとdivの間隔が必要な場合は、margin:要素を調整するだけです。

于 2013-03-18T14:21:09.917 に答える