MW211 EXIT

devlog
CSS/fieldsetにおけるオーバーフローの違い
2014年02月06日
画面の横幅を超える文字が「fieldset」タグ中にあった場合、
IEとそれ以外では挙動が異なる。

IE以外の場合、「fieldset」全体が拡張し、画面全体が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル────────────────────────────────│
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや│
│  └────────────────────────────────────│
├─┬──┬───────────────────────────────┬─┤
│←│    │                                                              │→│
└─┴──┴───────────────────────────────┴─┘

IEの場合、「fieldset」は拡張せず、文字がはみだし、画面全体が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル──────────────────────────────┐  │
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや│
│  └──────────────────────────────────┘  │
├─┬──┬───────────────────────────────┬─┤
│←│    │                                                              │→│
└─┴──┴───────────────────────────────┴─┘
ちなみに、「fieldset」の横幅をJavaScriptで調べたら、小さいままだった。

対策としては、「fieldset」自体にスクロールバーを実装してしまうというのがある。
┌──────────────────────────────────────┐
│fieldset {                                                                  │
│    overflow    :auto;                                                      │
│}                                                                           │
└──────────────────────────────────────┘
IEの場合のみ、「fieldset」が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル──────────────────────────────┐  │
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめ│  │
│  ├─┬──┬───────────────────────────┬─┤  │
│  │←│    │                                                      │→│  │
│  └─┴──┴───────────────────────────┴─┘  │
└──────────────────────────────────────┘
IE以外の場合は、「fieldset」が拡張して(「fieldset」内の)オーバーフローが
発生しないので、これまで通り画面全体が横スクロールとなる。
分類:CSS