IE では、ドロップダウン リストはドロップボックスと同じ幅をとります (意味があることを願っています) が、Firefox では、ドロップダウン リストの幅はコンテンツによって異なります。
これは基本的に、可能な限り長い選択肢を表示するのに十分な幅のドロップボックスを確保する必要があることを意味します。これにより、私のページは非常に見苦しくなります:(
この問題の回避策はありますか? CSS を使用してドロップボックスとドロップダウンリストに異なる幅を設定するにはどうすればよいですか?
NimsDotNet
質問する
100995 次
27 に答える
102
別のjQueryベースの例を次に示します。ここに投稿された他のすべての回答とは対照的に、すべてのキーボードとマウスのイベント、特にクリックが考慮されます。
if (!$.support.leadingWhitespace) { // if IE6/7/8
$('select.wide')
.bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('blur', function() { $(this).removeClass('expand clicked'); });
}
次の CSS と組み合わせて使用します。
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
wide問題のドロップダウン要素にクラスを追加するだけです。
<select class="wide">
...
</select>
これが jsfiddle の例です。お役に立てれば。
于 2010-03-25T14:58:32.333 に答える
14
独自のドロップダウン リストを作成することは、価値があるというよりは苦痛です。JavaScript を使用して、IE ドロップダウンを機能させることができます。
YUI ライブラリのビットと、IE 選択ボックスを修正するための特別な拡張機能を使用します。
以下を含め、<select>要素を<span class="select-box">
これらをページの body タグの前に置きます。
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>
承認後の編集:
これは、YUI ライブラリと Hack コントロールがなくても実行できます。本当に必要なのは、選択要素に onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" (または必要なもの) を配置することだけです。YUI コントロールは素晴らしいアニメーションを提供しますが、必須ではありません。このタスクは、jquery やその他のライブラリでも実行できます (ただし、これに関する明示的なドキュメントは見つかりませんでした)。
-- 編集の修正:
IE では、選択コントロールの onmouseout に問題があります (オプションでのマウスオーバーが選択でのマウスオーバーであるとは見なされません)。これにより、マウスアウトの使用が非常に難しくなります。最初の解決策は、これまでに見つけた中で最高のものです。
于 2008-09-16T17:00:15.293 に答える
12
次のことを試すことができます...
styleClass="someStyleWidth"
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}"
onblur="this.style.position='';this.style.width=''"
私は試してみましたが、うまくいきます。他に必要なものはありません。
于 2010-06-03T19:48:38.367 に答える
9
私は次の解決策を使用しましたが、ほとんどの状況でうまくいくようです。
<style>
select{width:100px}
</style>
<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
<option>One</option>
<option>Two - A long option that gets cut off in IE</option>
</select>
</html>
注: $.browser.msieには jquery が必要です。
于 2009-09-05T17:31:03.760 に答える
7
@ぼかしイベントハンドラーも追加する必要があります
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
$("#dropdown").blur(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
ただし、これにより、要素だけではなく、クリック時に選択ボックスが展開されます。(IE6 では失敗するようですが、Chrome と IE7 では完全に動作します)
于 2009-06-24T08:19:44.147 に答える
5
IE6/IE7/IE8 でそれを行う方法はありません。コントロールはアプリによって描画され、IE はそのように描画しません。ドロップダウンを 1 つの幅で、リストを別の幅にすることが重要な場合は、単純な HTML/CSS/JavaScript を介して独自のドロップダウンを実装することをお勧めします。
于 2008-09-16T16:19:00.620 に答える
5
jQuery を使用している場合は、次の IE 幅選択プラグインを試してください。
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
このプラグインを適用すると、Internet Explorer の選択ボックスが、固定幅の外観とスタイルを失うことなくオプション要素を全幅で開くことができるようになり、Firefox や Opera などで動作するように動作するように見えます。また、Internet Explorer 6 および 7 の選択ボックスにパディングと境界線のサポートを追加します。
于 2010-09-21T11:50:10.667 に答える
4
jQuery では、これはかなりうまく機能します。ドロップダウンに id="dropdown" があるとします。
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
于 2009-05-26T20:05:01.087 に答える
3
これが最も簡単な解決策です。
始める前に、IE6 を除くほとんどすべてのブラウザで、ドロップダウン選択ボックスが自動的に展開されることをお伝えしなければなりません。したがって、ブラウザ チェック (つまり IE6) を実行し、そのブラウザにのみ次のように記述します。ここに行きます。まず、ブラウザを確認してください。
このコードは、ドロップダウン選択ボックスを魔法のように展開します。ソリューションの唯一の問題は、onmouseover ドロップダウンが 420px に展開されることです。overflow = hidden のため、展開されたドロップダウン サイズを非表示にして 170px として表示しています。そのため、ddl の右側の矢印が隠れて見えなくなります。ただし、選択ボックスは 420px に拡張されます。それが私たちが本当に望んでいるものです。以下のコードを自分で試してみて、気に入ったら使用してください。
.ctrDropDown
{
width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:420px; <%-- this the width of the dropdown select box.--%>
}
<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>
上記はIE6のCSSです。他のすべてのブラウザの共通 CSS は次のようになります。
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
于 2009-10-14T20:42:34.190 に答える
2
本格的なjQueryプラグインが利用可能です。壊れないレイアウトとキーボード操作をサポートしています。デモページをご覧ください：http：//powerkiki.github.com/ie_expand_select_width/
免責事項：私はそのことをコーディングしました、パッチは大歓迎です
于 2012-08-20T11:47:53.107 に答える
2
これは私が他の人のものから少し取って行ったことです。
$(document).ready(function () {
if (document.all) {
$('#<%=cboDisability.ClientID %>').mousedown(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboDisability.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboDisability.ClientID %>').change(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').mousedown(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboEthnicity.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').change(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
});
}
});
ここで、cboEthnicityとcboDisabilityは、選択自体の幅よりも広いオプションテキストを持つドロップダウンです。
ご覧のとおり、これはIEでのみ機能するため、lはdocument.allを指定しました。また、次のようにdiv要素内にドロップダウンを含めました。
<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>
これにより、ドロップダウンが展開されたときに他の要素がずれて移動するのを処理します。ここでの唯一の欠点は、選択するとメニューリストのビジュアルが消えますが、選択するとすぐに戻ることです。
これが誰かを助けることを願っています。
于 2011-06-17T17:20:21.800 に答える
2
トランジション効果のないシンプルなドロップダウンおよび/またはフライアウトメニューが必要な場合は、CSSを使用してください...動作（IE6のみのプロパティ）で定義された動作（IE6のみのプロパティ）を持つ.htcファイル（css3hover？）を使用して、IE6にすべての要素で：hoverをサポートさせることができます条件付きで添付されたCSSファイル。
于 2009-12-09T17:32:48.133 に答える
2
上記のBalusCの答えはうまく機能しますが、ドロップダウンのコンテンツの幅がCSS select.expandで定義した幅よりも小さい場合に追加する小さな修正があり、これをマウスオーバーバインドに追加します。
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
于 2010-08-16T16:04:44.493 に答える
2
これを行う最良の方法は次のとおりです。
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
BalusC ソリューションとまったく同じです。これだけは簡単です。;)
于 2012-02-02T16:03:16.383 に答える
2
これをチェックしてください..完璧ではありませんが、動作します.IE専用で、FFには影響しません. 私はonmousedownに通常のjavascriptを使用してIEのみを修正しました..しかし、jqueryのmsieをonmousedownでも使用できました..主なアイデアは、選択ボックスを通常に戻すための「onchange」とぼかしです.. . それらの幅は自分で決めてください。35%必要でした。
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
于 2010-06-15T19:05:42.717 に答える
1
jquery BalusC のソリューションは、私によって改善されました。また使用: Brad Robertson のコメントはこちら.
これを .js に入れて、目的のコンボにワイド クラスを使用し、ID を偽造しないでください。onload (または documentReady など) で関数を呼び出します。
単純なお尻 :)
コンボに定義した幅を最小の長さとして使用します。
function fixIeCombos() {
if ($.browser.msie && $.browser.version < 9) {
var style = $('<style>select.expand { width: auto; }</style>');
$('html > head').append(style);
var defaultWidth = "200";
// get predefined combo's widths.
var widths = new Array();
$('select.wide').each(function() {
var width = $(this).width();
if (!width) {
width = defaultWidth;
}
widths[$(this).attr('id')] = width;
});
$('select.wide')
.bind('focus mouseover', function() {
// We're going to do the expansion only if the resultant size is bigger
// than the original size of the combo.
// In order to find out the resultant size, we first clon the combo as
// a hidden element, add to the dom, and then test the width.
var originalWidth = widths[$(this).attr('id')];
var $selectClone = $(this).clone();
$selectClone.addClass('expand').hide();
$(this).after( $selectClone );
var expandedWidth = $selectClone.width()
$selectClone.remove();
if (expandedWidth > originalWidth) {
$(this).addClass('expand').removeClass('clicked');
}
})
.bind('click', function() {
$(this).toggleClass('clicked');
})
.bind('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$(this).removeClass('expand');
}
})
.bind('blur', function() {
$(this).removeClass('expand clicked');
})
}
}
于 2011-09-05T19:28:13.067 に答える
1
于 2009-12-09T11:53:18.430 に答える
0
asp：dropdownlistにも同じことがあります。
Firefox（3.0.5）では、ドロップダウンはドロップダウン内の最も長いアイテムの幅であり、幅600ピクセルなどです。
于 2009-04-03T15:57:54.360 に答える
0
IE、Chrome、FF、Safari のすべてのバージョンでテスト済み
JavaScript コード:
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
HTML コード:
<select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
<option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>
于 2012-05-08T11:47:45.040 に答える
0
最初のベスト アンサーの hegerwow リンク (YUI アニメーションの回避策) が壊れています。ドメインの有効期限が切れているようです。有効期限が切れる前にコードをコピーしたので、ここで見つけることができます (コードの所有者は、著作権を侵害しているかどうかを再度アップロードして知らせることができます)。
同じブログ投稿で、YUI ボタン メニューを使用して、通常の SELECT 要素とまったく同じ SELECT 要素を作成することについて書きました。見て、これが役立つかどうか教えてください！
于 2010-07-01T19:48:43.313 に答える
0
これらの解決策をすべて試しましたが、完全に機能するものはありませんでした。これが私が思いついたものです
$(document).ready(function () {
var clicknum = 0;
$('.dropdown').click(
function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
$(this).css('position', '');
$(this).css('width', '');
}
}).blur(
function() {
$(this).css('position', '');
$(this).css('width', '');
clicknum = 0;
}).focus(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
}).mousedown(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
});
})(jQuery);
HTML の各ドロップダウンに必ずドロップダウン クラスを追加してください。
ここでの秘訣は、特殊なクリック機能を使用することです (私はここで見つけましたFire event every time a DropDownList item is selected with jQuery )。ここにある他のソリューションの多くは、イベント ハンドラーの変更を使用しています。これはうまく機能しますが、ユーザーが以前に選択したものと同じオプションを選択した場合はトリガーされません。
他の多くのソリューションと同様に、focus と mousedown はユーザーがドロップダウンにフォーカスを合わせたとき、blur はクリックして離れたときに使用します。
また、これに何らかの種類のブラウザ検出を貼り付けて、つまりにのみ影響するようにすることもできます。他のブラウザでは見栄えは悪くありませんが、
于 2012-10-23T17:12:11.360 に答える
0
私はこの問題を回避する必要があり、IE6、7、および 8 で動作する (そして明らかに他のブラウザーと互換性のある) かなり完全でスケーラブルなソリューションを思いついたことがあります。私はそれについての記事全体をここに書きました: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
上記の解決策はすべての場合に機能しないため（私の意見では）、まだこの問題に遭遇している人々のためにこれを共有したいと思いました。
于 2012-06-27T23:10:54.797 に答える
0
Saiによって投稿されたソリューションに基づいて、これは jQuery でそれを行う方法です。
$(document).ready(function() {
if ($.browser.msie) $('select.wide')
.bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
.bind('blur', function() { $(this).css({position:'static',width:''}); });
});
于 2011-10-05T09:56:05.867 に答える
0
select 要素にスタイルを直接追加できます。
<select name="foo" style="width: 200px">
したがって、この選択項目は 200 ピクセル幅になります。
または、クラスまたは ID を要素に適用して、スタイルシートで参照することもできます
于 2008-09-16T16:11:37.393 に答える
0
これまでのところ、1つもありません。IE8 についてはわかりませんが、JavaScript で独自のドロップダウン リスト機能を実装しない限り、IE6 と IE7 では実行できません。Web 上でそれを行う方法の例がありますが、既存の機能を複製するメリットはあまりありません。
于 2008-09-16T16:15:24.247 に答える
0
私はリングに帽子を投げると思った。私は SaaS アプリケーションを作成し、テーブル内に選択メニューを埋め込んでいました。この方法は機能しましたが、テーブル内のすべてが歪んでいました。
onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"
したがって、すべてを改善するために私がしたことは、選択を z-indexed div 内にスローすることでした。
<td valign="top" style="width:225px; overflow:hidden;">
<div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
<select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
<option value="0">All</option>
<!--More Options-->
</select>
</div>
</td>
于 2012-02-08T20:07:47.190 に答える
0
これは IE6 で動作するようで、他を壊すようには見えません。もう1つの優れた点は、ドロップダウンの選択を変更するとすぐにメニューが自動的に変更されることです.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
于 2010-07-21T19:46:40.437 に答える