9

の中にスクロール可能なボックスを配置したいのですがfieldset、癖があり、それを回避する方法がわかりません。divスクロール可能な要素を a の中に入れると、スクロール可能な要素をスクロールさせる代わりに が展開されますfieldset。fieldset

これがテストケースです。以下は無期限に展開されます (ブー):

<div style="width: 300px; overflow: hidden;">
   <fieldset>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

しかし、 a を使用するdivと、期待どおりに動作します (万歳!):

<div style="width: 300px; overflow: hidden;">
   <div>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </div>
</div>

fieldsetを のように動作させるにはどうすればよいdivですか?

4

5 に答える 5

12

WebKit と Firefox は、フィールドセットがコンテンツの計算された幅に基づいて「暗黙の」幅を持つように制限します。それぞれをオーバーライドする方法を次に示します。

  • WebKit を使用すると、比較的簡単に作成できます。この動作はデフォルトのスタイルシートで定義されているため、フィールドセットに指定することでオーバーライドできますmin-width: 0。

  • Firefox は、フィールドセット幅の制約が Gecko レイアウト コードの奥深くで適用されるため、より厄介です。幸いなことに、回避策がありdisplayます。Gecko のみのルールを追加して、フィールドセットのプロパティをいくつかの内部テーブル要素の 1 つに対応する値に設定します。

すべてを一緒に入れて：

fieldset { min-width: 0; }

/* FF hack; not needed for newer versions */
@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */
    fieldset { display: table-cell; }
}

jsFiddle デモ.

更新 (2017 年 9 月 25 日)

display: table-cellハッキングを必要とした [Firefox のバグ][バグ] は現在修正されています。新しいバージョンの Firefox をターゲットにしている場合は、それを省略してmin-width: 0. （リマインダーをありがとう@Nikolay！）

それが必要だった理由の詳細については、関連する質問への私の回答に、ブラウザの内部構造など、より完全な説明があります。

于 2013-07-29T11:13:19.023 に答える
0

これはあなたが求めているものですか？

<div style="overflow: auto; width: 300px; height: 55px;">
   <fieldset style="overflow: scroll; width: 100%; white-space: nowrap;">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>
于 2009-12-01T17:23:46.917 に答える
0

あなたがそれを望むかどうかはわかりませんが、これは機能しています：

<div style="width: 300px; overflow: auto;">
   <fieldset>
      <div style="overflow: auto; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

ルートdivを削除することもできますが、それでも機能します。

于 2009-11-11T16:09:15.330 に答える
0

この問題に対する実行可能な解決策はないようです。本当にフィールドセットが必要な場合は、div を使用してフィールドセットのようにスタイルを設定できますが、クロスブラウザーの問題や頭痛の種がたくさんあります。最善の解決策: フォームをリファクタリングして、フィールドセットを使用しないようにします。

于 2009-12-01T16:55:04.463 に答える
-1

覚えて

position:absolute は display:table cell では機能しません Flex レイアウトをデバッグしようとすると、それが私が持っているものです

覚えておいてください

于 2015-07-23T07:09:45.973 に答える