[解決済み] <fieldset> のサイズが変更される; 削除不可能な `min-width: min-content` があるように見える

2022-04-07 03:13:38

質問

問題点

私は <select> そのうちの1つは <option> のテキスト値が非常に長い。私は <select> は、表示されているテキストを切り取る必要がある場合でも、親よりも幅が広くならないようにサイズを変更します。 max-width: 100% がそうするはずです。

リサイズ前。

リサイズ後に欲しいもの

しかし、もしあなたが この jsFiddle の例をロードします。 の幅よりも小さくなるように、Resultパネルのサイズを変更します。 <select> の中にあるセレクトは <fieldset> は、幅の縮小に失敗しています。

リサイズ後に実際に表示されているもの。

しかしに相当するページで <div> の代わりに <fieldset> はきちんと拡大縮小します。ご覧のとおりで より簡単に変更点をテストすることができます があれば a <fieldset> と <div> 1つのページで隣り合っている . そして、もしあなたがを削除します。 <fieldset> タグの場合、リサイズはうまくいきます。その <fieldset> タグが原因で、横方向のリサイズがなぜか壊れる。

その <fieldset> は、あたかもCSSルールがあるかのように振る舞います。 fieldset { min-width: min-content; } . ( min-content というのは、大雑把に言って、子供がはみ出さない最小の幅という意味です)。を置き換えると <fieldset> を追加しました。 <div> と min-width: min-content というように、全く同じに見えます。しかし min-content は、私のスタイルにも、ブラウザのデフォルトのスタイルシートにも、FirebugのCSSインスペクタにも表示されています。で表示されるすべてのスタイルを上書きしようとしました。 <fieldset> FirebugのCSSインスペクタとFirefoxのデフォルトスタイルシートで forms.css が、役に立ちませんでした。具体的には min-width と width も何もしなかった。

コード

フィールドセットのHTML。

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

動作するはずなのに動作しない私のCSS。

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

リセットする width プロパティをデフォルトのは何もしません。

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

さらにCSSで問題を解決するために試行錯誤する :

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

詳細

この問題は、次のような場合にも発生します。より包括的で、より複雑なjsFiddleの例これは、私が実際に修正しようとしているウェブページにもっと近いものです。これを見ると <select> は問題ではありません - インラインブロックの div もリサイズに失敗します。この例はより複雑ですが、上記の単純なケースに対する修正が、このより複雑なケースにも適用されると仮定します。

[編集：以下のブラウザサポートの詳細を参照してください] 。

この問題で一つ不思議なのはを設定すると div.wrapper { width: 50%; } は、その <fieldset> でサイズ変更を停止し、その時点でフルサイズの <select> はビューポートの端に当たっているはずです。サイズ変更は、あたかも <select> があります。 width: 100% であるにもかかわらず <select> があるように見えます。 width: 50% .

もし、あなたがを与える。 <select> そのもの width: 50% の場合、そのような動作は発生せず、単に幅が正しく設定されるだけです。

その違いの理由がわからない。でも、関係ないかもしれません。

また、非常によく似た質問を見つけました。 HTML フィールドセットで、子プロセスを無限に拡張することができます。 . 質問者は解決策を見つけることができず解決策がないことを推測するを削除する以外には <fieldset> . しかし、私は、もし本当に <fieldset> が正しく表示されるのはなぜでしょうか？また <fieldset> 's スペックまたはデフォルトCSS ( この質問の時点ではのような挙動になるのでしょうか？複数のブラウザがこのように動作しているので、この特殊な動作はおそらくどこかに記録されているはずです。

背景となる目標・要件

これをやろうとしている理由は、大きなフォームを持つ既存のページのモバイル・スタイルを書くためです。このフォームには複数のセクションがあり、そのうちの一部は <fieldset> . スマートフォンの場合（またはブラウザのウィンドウを小さくした場合）、ページ内の <fieldset> は、フォームの他の部分よりはるかに広いです。フォームの大部分はうまく幅が制限されていますが <fieldset> そのため、ユーザーはその部分をすべて見るためにズームアウトするか、右にスクロールすることを余儀なくされます。

を単純に削除することには疑問があります。 <fieldset> これは、大きなアプリの多くのページで生成され、CSSやJavaScriptのどのセレクタがこれに依存しているか分からないからです。

必要ならJavaScriptを使ってもいいし、JavaScriptの解決策はないよりマシです。しかし、もしJavaScriptしか使えないのであれば、なぜCSSとHTMLだけではできないのか、その説明を聞きたいと思います。

編集：ブラウザ対応

このサイトでは、Internet Explorer 8以降（IE7はサポートを打ち切りました）、最新のFirefox、そして最新のChromeをサポートする必要があります。この特別なページは、iOSとAndroidのスマートフォンでも動作する必要があります。Internet Explorer 8では、多少劣化していても使用可能な動作であれば許容されます。

再テストしてみました私の壊れた fieldset 例を別のブラウザで表示させることができます。実際にはこれらのブラウザですでに動作しています。

Internet Explorer 8、9、10
クローム
Android版Chrome

これらのブラウザでは壊れます。

Firefox
Android版Firefox
インターネットエクスプローラー7

したがって、現在のコードが壊れるブラウザは、私が気にしているのはFirefoxだけです（デスクトップとモバイルの両方において）。もしコードが修正されて、他のブラウザで壊れることなくFirefoxで動作するようになれば、私の問題は解決します。

このサイトのHTMLテンプレートでは、Internet Explorerの条件付きコメントを使って、以下のようなクラスを追加しています。 .ie8 と .oldie から <html> 要素を使用します。IEでのスタイルの違いを回避する必要がある場合、CSSでこれらのクラスを使用することができます。追加されたクラスはこの旧バージョンのHTML5 Boilerplate .

解決方法は？

更新情報（2017年9月25日）

は Firefoxのバグという回答は、Firefox 53の時点で修正されており、この回答へのリンクは、ようやく Bootstrap のドキュメントから削除されました。 .

また、Mozilla のコントリビューターには大変申し訳なく思っています。 -moz-document この回答が一因です。

修正箇所

WebKit と Firefox 53+ では、単に min-width: 0; のデフォルト値をオーバーライドするために、フィールドセット上で min-content .¹

それでも、Firefoxはフィールドセットに関してはちょっと...変です。以前のバージョンでこれを動作させるには、フィールドセットの display プロパティを以下の値のいずれかに変更します。

table-cell (推奨)
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

この中で、私がお勧めするのは table-cell . どちらも table-row と table-row-group は幅を変更することができません。 table-column と table-column-group は、高さを変更できないようにします。

これは、（ある程度合理的に）IEでのレンダリングを中断させます。Gecko だけがこれを必要とするので、正当な方法で @-moz-document -のいずれかです。 Mozilla 独自の CSS 拡張機能 -他のブラウザから隠すために。

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(以下は jsFiddleデモ .)

しかし、私のような場合は、次のような反応になります。

なんだ。

そこにはしかし、その理由は簡単なものではありません。

fieldset要素のデフォルトのプレゼンテーションは不合理で、CSSで指定することは本質的に不可能です。考えてみてください。フィールドセットのボーダーは凡例要素と重なったところで消えてしまいますが、背景は見えるままです。他の要素の組み合わせでは、これを再現する方法はありません。

さらに言えば、実装はレガシーな動作に対する譲歩でいっぱいです。そのひとつが、フィールドセットの最小幅がそのコンテンツの固有幅より小さくなることはない、というものです。WebKit では、デフォルトのスタイルシートで指定することにより、この動作をオーバーライドする方法がありますが、Gecko² ではさらに一歩進んでは、レンダリングエンジンでそれを強制します。 .

ただし、内部テーブル要素は特殊フレームタイプ Gecko ではこれらを持つ要素の寸法制約 display の値が設定されている場合、その値は別のコードパスフィールドセットで強制される最小幅を完全に回避することができます。

またこのバグはFirefox 53で修正されたので、新しいバージョンだけをターゲットにしている場合はこのハックは必要ありません。

を使用していますか？ `@-moz-document` 安全ですか？

この一件に関しては、イエスです。 @-moz-document は、このバグが修正された 53 までのすべてのバージョンの Firefox で、意図したとおりに動作します。

これは偶然ではありません。この回答が一因で制限 @-moz-document をユーザー/UAのスタイルシートには、フィールドセットの根本的なバグが最初に修正されることに依存するようになりました。

これより先は を使用しないでください。 @-moz-document を使用して Firefox をターゲットにした CSS を作成します。 他のリソースはともかくとして。

¹ 値が前につくことがあります。ある読者によると、Android 4.1.2 Stock Browser やその他の古いバージョンでは効果がないとのことです; 私はこれを確認する時間がありませんでした。

² この回答中の Gecko ソースへのリンクはすべて 5065fdc12408 チェンジセット 2013 年 7 月 29 日にコミットされました。 Mozilla Central の最新リビジョン .

³ 例を参照してください。 SO #953491: CSS で Firefox のみをターゲットにした場合 と CSSトリック FirefoxをターゲットにしたCSSハック 知名度の高いサイトで広く参照される記事のために。