親愛なる読者の皆さん、このような素晴らしいタグの
フィールドセットについて知っていますか？ もちろん、あなたは知っていると思います！ よく使いますか？ めったにないと思います。 わかりました、わかりました、あなたはあなたです、親愛なる、あなたはかなり頻繁にそれを使用しますが、近隣の会社からのレイアウトデザイナーVasyaは間違いなくまれであり、多分それを見つけたときに一度だけ「味わった」でしょう。 まあ、大丈夫、それはポイントではありません。 頻繁に使用する場合、ネストされた要素がより広く、
オーバーフローが役立たない場合、
widthを無視するという異常な
フィールドセットの動作に遭遇する可能性があります。 すぐに
例を挙げます。 FF（32）およびChrome（35）の現在のバージョンでこれと後続の例を参照してください。 IE11は、奇妙なことに、最高の側面を示し、正しく機能しました。 他のブラウザをチェックしませんでした。
注意！ この記事では、すべての例が最大限に簡素化されています-1つのネストされた要素に！
それでは、少し戻ってみましょう。 多くの場合、カルーセルを作成するなど、割り当てられたブロックに収まらない余分な要素を非表示にする必要があります。 ここではすべてが明確です：
- 指定された幅/高さをブロックに割り当てて、 非表示またはスクロールをオーバーフローさせます
- 内部で、これがカルーセルの場合、幅/高さをマージンで設定します。
- 利益
複雑なことは何もないようです。
例 。
しかし、フォームが必要な状況があり、病気の脳は
フィールドセットを使用して要素をグループ化することにしました。 まあ、それは病気の脳ではなく、むしろ健康な脳です。なぜなら、それは意味的でクールだからです。すべてが大人のようです。 いつもと同じことをしようとしています。
まず、
高さ制限のある例 。 すべてが高さどおりに機能します。 JSでスクロールを行いたい場合は、
スクロールまたは
非表示にすることができます。結果は私たちを幸せにします。
しかし、同時に、
フィールドセットの幅
が 100％であり、少し困惑していることがすぐにわかります。 誰もがすぐに叫ぶと思います：「だから彼に幅を聞いてください！」さて、
この幅を設定しましょう！ 何が見えますか？..ああ、遍在するhtml、あなたを連れて行く、どんな種類のヒンドゥー教のバグ？
Fieldsetは縮小されましたが、それに埋め込まれた要素のサイズまで縮小されました。 これは、
fieldsetの理解できない機能であり、バグまたは機能です。
もちろん、
簡単な解決策があり
ます -これは、内側をもう1ブロックでラップし、
オーバーフローと固定幅に設定することです。
私は問題の解決策を探そうとしましたが、Googleは陽気なことは何も言わず、
bugzilla.mozilla.orgでの長い対話だけでしたが、この特定の問題に関する議論は見つかりませんでした。 この主題に関する
仕様も、わかりやすいものを何も伝えていません。 または、英語の知識が乏しいため、私は見つけられませんでした。
仕様は、
フィールドセットが以下を参照することを示しています。
- フローコンテンツ 、つまり、機能については何も伝えず、たとえば、すべての人に愛されているdivと区別しません。
- セクショニングルート 。これは、TDの境界線やヒーローのフィールドセットなど、子孫に継承されない独特のスタイルを意味し、他のスタイルには独自のスタイルがあります。 また、何も提供せず、「隣接する」blockquote要素で確認できます
- リストされた要素とフォームに関連付けられた要素は、親フォームを持つ/持たなければならない要素です。 ここでは、 ボタンなどの「隣接要素」を確認することもでき ます 。 結果を推測したと思います。
- 触知可能なコンテンツ -これは、この要素を埋める必要があることを示しています。 これは必須ではありません。この要素は空の子要素で埋めるために空に準備できますが、空のままにしないことをお勧めします。 そのような要素はたくさんあるので、そうではありません。
次に、属性の標準的な説明といくつかの例を示します。
彼らは私を助けなかったので、私たちは自分でそれを理解しようとします。
Chromeの場合、すべてがシンプルであることが判明しました。 彼にはベンダーの
最小幅があります：-webkit-min-contentが縫い付けられています。これは、たとえ知らなくても言葉を翻訳するだけで、多くのヒントと発言をします。 組み込みの開発者ツールを使用して簡単に見つけることができました。 したがって、この問題は単純に解決されます。このため、
min-widthをwidthに設定するだけで十分です。
しかし、FFの場合、この方法は役に立ちませんでした。 そして、ここでは、狭い円で広く知られている突く方法が助けになるために呼ばれました。 最初に思い浮かぶのは、
displayを設定することです
：block 。 この考えは、おそらく記事の最初から何度もあなたを訪問しましたか？ ただし、
block 、
inline 、さらには
tableのいずれも適切ではありません。 しかし、思考の流れは正しいです。 あらゆる種類のモードを列挙することにより、理解できないがいくつかの動作モードが見つかりました。 これらは
表セルまたは
表列モードです。
table-column-group 、
table-footer-group、または
table-header-groupのオプションも可能ですが、これはすでに過剰です。 テーブルセルモードは何と関係がありますか？聞かないでください。 しかし、私はこれをFFのハックと考えており、より合理的で正しい解決策を見つけたいと思います。
フィールドセットで問題を解決する他の方法でこの問題を解決したり、仕様に精通して何が何であるかを伝える専門家がいるかもしれません。 または、両方のブラウザのバグトラッカーに書き込む価値がありますか？
遊ぶための
例でjsfiddleにリンクします。
スリッパを投げることができるようになりました。 ご清聴ありがとうございました。