Firefox でフィールドセットのサイズ変更の問題を解決するにはどうすればよいですか?

<フィールドセット>サイズ変更の問題とその修正方法

問題:

特定のブラウザ (特に Firefox) の要素は、含まれている要素の幅が縮小されると、その幅を縮小できません。これにより、水平スクロールバーが発生し、親コンテナ内に不適切に収まります。

根本原因:

デフォルトでは、フィールドセットには最小幅「min-content」が適用されます。彼らに。これにより、CSS で設定した最大幅ルールや幅ルールをオーバーライドできます。

解決策:

s を適切に拡大縮小できるようにするには:

1. WebKit と Firefox 53 :

   • 最小幅を設定: 0;フィールドセットでデフォルト値を上書きします。

2. Firefox 53 より前:

   • Set min-width: 0 ;
   • フィールドセットの表示プロパティを次のいずれかに変更します: table-cell、table-column、table-column-group、table-footer-group、table-header-group、table -row、または table-row-group。

   推奨値: table-cell

ブラウザの互換性:

• 初期の問題は Firefox 53 以降で修正されました。
• @-moz-document を使用した提案された解決策は、この問題に関しては廃止されましたが、古いバージョンのFirefox.

注意:

この特定の問題以外では、CSS で Firefox をターゲットにするために @-moz-document を使用しないでください。ブラウザ固有のスタイルを実現するためのより良いアプローチが登場しました。

以上がFirefox でフィールドセットのサイズ変更の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。