問題
私が持っている<select>その場所の1 <option>のテキスト値が非常に長いです。私がしたい<select>、それがその表示されたテキストをカットする場合であっても、その親よりも幅が広いことはありませんので、サイズを変更します。max-width: 100%それを行う必要があります。
サイズ変更前：
サイズ変更後に必要なもの：
ただし、このjsFiddleの例をロードし、結果パネルの幅をの幅よりも小さくなるようにサイズ変更する<select>と、内の選択が<fieldset>その幅を縮小できないことがわかります。
サイズ変更後に実際に表示されるもの：
ただし、aの<div>代わりにaを使用<fieldset>した同等のページは適切にスケーリングされます。1つのページにとが隣接していると、それを確認して変更をより簡単にテストできます。また、周囲のタグを削除すると、サイズ変更が機能します。タグは何とかブレークに水平方向のサイズ変更を引き起こしています。<fieldset><div><fieldset><fieldset>
<fieldset>CSSルールがあるかのように行為がありますfieldset { min-width: min-content; }。（min-content手段は、大体、最小幅オーバーフローに子供を起こさないこと。）私が交換した場合<fieldset>と<div>でmin-width: min-content、それはまったく同じに見えます。それでもmin-content、私のスタイル、ブラウザのデフォルトスタイルシート、またはFirebugのCSSインスペクタに表示されるルールはありません。<fieldset>FirebugのCSS Inspectorと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の例でも発生します。これは、実際に修正しようとしているWebページにより似ています。<select>これで問題ないことがわかります–インラインブロックdivもサイズ変更に失敗します。この例はより複雑ですが、上記の単純なケースの修正により、このより複雑なケースも修正されると思います。
[編集：下記のブラウザサポートの詳細をご覧ください。]
この問題の1つの奇妙な点は、を設定div.wrapper { width: 50%; }した場合、<fieldset>ストップがその時点でサイズ変更を停止し、フルサイズ<select>がビューポートの端に当たってしまうことです。かのようにサイズ変更が起こる<select>持っているwidth: 100%にもかかわらず、<select>それが持っているように見えますwidth: 50%。
自分自身を指定した<select>width: 50%場合、その動作は発生しません。幅は単に正しく設定されています。
その違いの理由がわかりません。しかし、それは関係がないかもしれません。
また、非常によく似た質問のHTMLフィールドセットにより、子供たちが無制限に拡張できることがわかりました。質問者は解決策を見つけることができず、を削除する以外に解決策はないと推測しました<fieldset>。しかし、<fieldset>表示を正しくすることが本当に不可能であるなら、どうしてですか？（この質問の時点で）<fieldset>の仕様またはデフォルトの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ボイラープレートと同じです。
<fieldset>（またはdiv.wrapper）、そしてselect { width:100% }。max-width要素に親の元の幅の数％を与えるように見え、その後はスケーリングされませんwidthが、親とともにスケーリングされます。私はそれであなたが望むことはできると思います（しかし私は誤解されているかもしれません）。より複雑なフィドルで、左側の列のフィールドに％-widthとmin-pixel-widthを指定してみてください。次に、右側のフィールドに100-（left-fields-％-width）％widthを指定します。