web-dev-qa-db-ja.com

<fieldset>のサイズが間違っています。取り外し不可能な `min-width：min-content`があるようです

問題

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

サイズを変更する前に：

the page before resize, showing the whole <code>select</code>

サイズ変更後に欲しいもの：

my desired page after resize, with the <code>select</code> clipping its contents

しかし、このjsFiddleの例をロードで、<select>の幅よりも小さくなるように結果パネルの幅を変更すると、 <fieldset>内のselectはその幅を縮小できません。

サイズ変更後に実際に表示されるもの

my current page after resize, with a scroll bar

しかし、 <div>の代わりに<fieldset>を持つ同等のページ は適切に拡大縮小されます。あなたはそれを見ることができますし、 あなたの変更をもっと簡単にテストしますそれぞれの隣に<fieldset>と<div>） 1ページに他の 。そして、 周囲の<fieldset>タグを削除する の場合、サイズ変更は機能します。 <fieldset>タグはどういうわけか水平方向のサイズ変更を壊しています。

<fieldset>の動作は、CSSルールfieldset { min-width: min-content; }があるかのようになります。 （ min-content は、おおよそ、子をオーバーフローさせない最小の幅です。）<fieldset>を <div>でmin-width: min-content に置き換えると、まったく同じに見えます。 。それでも、私のスタイル、ブラウザのデフォルトスタイルシート、またはFirebugのCSSインスペクタに表示されるmin-contentに関する規則はありません。私はFirebugのCSSインスペクタとFirefoxのデフォルトスタイルシート forms.css の<fieldset>に表示されるすべてのスタイルを上書きしようとしましたが、それは役に立ちませんでした。特に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の例 でも発生します。これは、実際に修正しようとしているWebページにより似ています。 <select>は問題ではないことがわかります - インラインブロックdivもサイズ変更に失敗します。この例はより複雑ですが、上記の単純なケースの修正によってこのより複雑なケースも修正されると思います。

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

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

after resize with 50%-width wrapper div

<select>自体にwidth: 50%を付ける を指定した場合、そのような動作は起こりません。幅は単純に正しく設定されています。

after resize with 50%-width select

その違いの理由がわかりません。しかし、それは関連性がないかもしれません。

私も非常によく似た質問を見つけました HTML fieldsetは子供たちが無限に拡大することを可能にします 。質問者は、解決策を見つけることができず、<fieldset>を削除する以外に、 解決策はないと推測します 。しかし、<fieldset>を正しく表示することが実際には不可能であるのであれば、なぜでしょうか。 <fieldset>の spec または default 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
  • Internet Explorer 7

したがって、現在のコードが侵入することを私が気にかけている唯一のブラウザはFirefoxです（デスクトップとモバイルの両方）。他のどのブラウザでも壊さずにFirefoxで動作するようにコードが修正されれば、それは私の問題を解決するでしょう。

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

htmlwidthfieldsetcss
214
Rory O'Kane

更新（2017年9月25日）

私の大きな安堵のために、下記の Firefoxのバグ はFirefox 53の時点で修正されており、この答えへのリンクはついに Bootstrapのドキュメントから削除されました 。

修正

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で指定することは本質的に不可能です。考えてみてください。フィールドセットの罫線は凡例要素と重なっているところで消えますが、背景は表示されたままです。他の要素の組み合わせでこれを再現する方法はありません。

それを締めくくるために、実装はレガシーな振る舞いに対する譲歩でいっぱいです。その1つは、フィールドセットの最小幅がそのコンテンツの本来の幅より小さくならないことです。 WebKitはデフォルトのスタイルシートでそれを指定することでこの振る舞いを上書きする方法をあなたに与えるが、Gecko²はさらに一歩進んで レンダリングエンジンでそれを強制する 。

しかし、内部テーブル要素はGeckoでは 特殊フレームタイプ を構成します。これらのdisplay値が設定されている要素の寸法上の制約は、フィールドセットに課されている強制最小幅を完全に回避して、 別々のコードパス で計算されます。

繰り返しますが これに対するバグ はFirefox 53の時点で修正されているので、新しいバージョンのみを対象としている場合はこのハックは不要です。

@-moz-documentの使用は安全ですか？

この問題の1つでは、はい。@-moz-documentは、このバグが修正された53までのFirefoxのすべてのバージョンで意図したとおりに機能します。

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

これを越えて、私はもはや@-moz-documentをあなたのCSS内のFirefox、他のリソースにかかわらず排他的にターゲットにすることを推奨しません。

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

²この回答に含まれるGeckoのソースへのリンクはすべて、2013年7月29日にコミットされた 5065fdc12408チェンジセット を参照しています。メモを Mozilla Centralからの最新のリビジョン と比較することをお勧めします。

³を参照してください。 SO＃953491：FirefoxをCSSでターゲットにすることandCSSトリック：CSSはFirefoxをターゲットにするハック 知名度の高いサイトで広く参照されている記事の場合は。

338
Jordan Gray

iOS上のSafariで選択された回答が表示される

私はJordan Greyからの回答が特に役に立つと思いました。しかし、Safari iOSでこの問題を解決できなかったようです。

私にとっての問題は、その中の要素が％widthとしてのmax-widthを持っている場合、フィールドセットは自動幅を持つことができないということです。

問題を修正しました

コンテナの幅が100％になるようにフィールドセットを設定するだけで、この問題は回避できます。

例

fieldset {
    min-width: 0; 
    width: 100%; 
}

実用的な例については以下を参照してください - フィールドセットから％widthを削除するかautoに置き換えると、機能しません。

JSFiddle | Codepen

10
boars

私はこれで何時間も苦労しました、そして、基本的に、ブラウザはあなたがあなたのCSSで無効にする必要がある計算されたスタイルを適用しています。 fieldsetsとdivs（おそらくmin-width？）に対して設定されている正確なプロパティを忘れてしまいました。

私の最善のアドバイスは、あなたの要素をdivに変更し、あなたのインスペクタから計算されたスタイルをコピーし、そしてfieldsetにあなたの要素を戻し、そして犯人を見つけるために計算されたスタイルを比較することです。

それが役立つことを願っています。

更新：display: table-cellを追加すると、Chrome以外のブラウザでも役に立ちます。

3
phdj

.fake-select { white-space:nowrap; }を指定すると、フィールドセットは.fake-select要素を強制的な幅ではなく元の幅で（オーバーフローが隠されている場合でも）解釈します。

そのルールを削除して、.fake-selectのmax-width:100%をちょうどwidth:100%に変更すれば、すべてうまくいきます。警告はあなたが偽の選択の内容のすべてを見るということですが、私はこれがそれほど悪いとは思わない、そしてそれは今横にフィットします。

更新：次のフィドル（現在の選択のみを含む）の現在の規則では、フィールドセットの子は正しい幅に制限されます。 .fake-selectの規則の削除とコメントの修正（// commentから/* comment */へ）以外にも、私はフィドルのCSSの変更に気付きました。

私は今あなたの問題をよく理解しています、そしてフィドルはいくらかの進歩を反映しています。私はすべての<select>sにデフォルトのルールを設定し、.xxlargeを480pxより広くなることを知っているもののために予約しています（そしてこれはあなたが知っているので#viewport、そして手動でクラスを広すぎるものに追加することができます。ちょっとテストが必要です）

証明

2
Trojan