期待どおりに縮小しないのはなぜですか?削除できない min-width: min-content の問題があるようです。

削除できない min-width があるようです: min-content

の問題を持っています、 のテキスト値の 1 つが非常に長いです。表示テキストを切り詰める必要がある場合でも、 の幅が親よりも広くならないように縮小したいと考えています。 max-width: 100% で十分です。

期待される結果

実際の結果

回避策

更新 (2017 年 9 月 25 日)

Firefox のバグ以下で説明する問題は Firefox 53 で修正され、この回答へのリンクもブートストラップから削除されました。文書から削除されました。

また、この回答のせいで -moz-document のサポートの削除を阻止しなければならなかった Mozilla の貢献者に心よりお詫び申し上げます。

修正

WebKit と Firefox 53 では、フィールドセットに min-width: 0; を設定するだけで min-content のデフォルト値をオーバーライドできます。 ¹

ただし、Firefox はフィールドセットに関しては少し奇妙です。以前のバージョンでこれを適切に機能させるには、フィールドセットの表示プロパティを次の値のいずれかに変更する必要があります:

• table-cell (推奨)
• テーブル列
• テーブル列グループ
• テーブルフッターグループ
• table-header-group
• table-row
• table-row-group

この中で、私がおすすめするのはテーブルセル。 table-row と table-row-group は両方とも幅を変更できませんが、table-column と table-column-group は高さを変更できません。

これにより (ある程度正当に) IE でのレンダリングが中断されます。 これを行う必要があるのは Gecko だけであるため、Mozilla 独自の CSS 拡張機能の 1 つである @-moz-document を使用して、この効果を他のブラウザから合法的に隠すことができます:

@-moz -document URLプレフィックス() {<pre class="brush:php;toolbar:false">fieldset {
    display: table-cell;
}

}

(これは jsFiddle ですデモ。)

原因

これで問題は解決しますが、あなたが私と同じなら、おそらくあなたの反応は...

何?

それには理由がありますが、理解するのは簡単ではありません。

fieldset 要素のデフォルトのレンダリングはばかげており、CSS で指定することは基本的に不可能です。考えてみてください。フィールドセットの境界線が凡例要素と重なる部分では消えますが、背景はまだ表示されています。他の要素の組み合わせではこの効果を再現できません。

最も重要なことは、実装には従来の動作に対する譲歩が数多く含まれていることです。その 1 つは、フィールドセットの最小幅がそのコンテンツの固有の幅を下回らないことです。 WebKit は、デフォルトのスタイルシートで指定することでこの動作をオーバーライドする方法を提供しますが、Gecko² はさらに一歩進んで、レンダリング エンジンでこの動作を強制します。

ただし、内部テーブル要素は、Gecko の特殊なフレーム タイプを構成します。これらの表示値設定を持つ要素のサイズ制約の計算は別のコード パスで行われ、フィールドセットに適用される最小幅を完全にバイパスします。

もう一度 - Firefox 53 にはこの問題に対するバグ修正があるため、新しいバージョンのみを対象とする場合は、この修正は必要ありません。

@-moz-document を使用しても安全ですか?

この問題に関しては、安全です。 @-moz-document は、Firefox のすべてのバージョンで期待どおりに動作します (このバグは修正された 53 まで)。

これは偶然ではありません。この回答のせいもあって、@-moz-document をユーザー/UA スタイルシートに制限するバグは、まず基礎となるフィールドセットのバグが修正されることに依存するように設定されました。

さらに、 は、他のリソースがそうしているにもかかわらず、CSS で @-moz-document を使用して Firefox をターゲットにしないでください。 ³

以上が期待どおりに縮小しないのはなぜですか?削除できない min-width: min-content の問題があるようです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。