3

selectHTMLで幅を指定する必要があります。

幅を超えるテキストをカットするIE8を除いて、すべてのブラウザで正常に機能します

CSS

select {
        border: 1px solid #65A6BA;
        font-size: 11px;
        margin-left: 22px;
        width: 166px;
    }

HTML

<select>
        <option value="1">Some text</option>
        <option value="2">Text Larger Than the Width of select</option>
        <option value="3">Some text</option>
        <option value="4">Some text</option>
        <option value="5">Some text</option>
    </select>

デモ

私はjs、jqueryソリューションを受け入れていますが、cssのみのソリューションを好みます

4

7 に答える 7

10

修正しました！

改訂されたjsFiddleは次のとおりです。http：//jsfiddle.net/PLqzQ/

秘訣はfocus、CSSにセレクターを追加して次のようにすることです。

select {
        border: 1px solid #65A6BA;
        font-size: 11px;
        margin-left: 22px;
        width: 166px;
        overflow:visible ;
    }

select:focus { width:auto ;
position:relative ;
}​

IE8でテストしたところ、チャームのように機能します。

非常に重要：コードにDoctype定義を追加する必要があります。そうしないと、IE8では修正が機能しません。

例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

于 2012-09-07T13:59:03.673 に答える
2

私は他のすべての答えが本当に不安定で複雑すぎることに気づきました。これは、次のCSSを使用して簡単に実行できます（少なくとも私の場合）。

html.IE8 .SelectContainer {
    position: relative;
}

html.IE8 .SelectContainer select {
    position: absolute;
    width: auto; /* Or fixed if you want. */
    max-width: 100%;
}

html.IE8 .SelectContainer select:focus {
    max-width: none;
}

htmlブラウザがIE8（またはそれ以下）の場合、要素にクラスを設定します（これを行う方法はGoogle）。

select中に入れて.SelectContainerクリックすると、必要に応じて展開します。

jQueryや条件付きコメントなどは必要ありません。少なくとも私のニーズでは、はるかに単純で、はるかにスムーズに機能します。

私はあなたの誰もがこれを従業員にする必要がないことを願っています。

米国政府が最新のブラウザにアップグレードしない時が来ました！

于 2014-02-07T05:37:56.637 に答える
1

問題のページは非常に古いページであり、IE 8を互換モードにする必要があるため、cssソリューションは機能しませんでした。

次のピースを使用して修正を終了しましたjquery

選択に次のクラスがあると仮定しますfixedWidth

$el = $("select.fixedWidth");
$el.data("origWidth", $el.outerWidth()) 

$el.mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });
于 2012-09-07T21:47:41.573 に答える
1

私も同じ問題を抱えていて、mouseenterとmouseleaveも試しましたが、非常に不器用だと思いました。（MSDNから）選択した要素のイベントリストを確認し、 inteadのbeforeactivateとdeactivateを使用してみました。私の意見では、それははるかにスムーズに機能しました。IE8で直接実行されているページでテスト済み（互換モードではありません）：

$('select').beforeactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', 'auto');

});

$('select').deactivate(function () {
    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (!isIE8)
        return;
    $(this).css('width', '166px');
});
于 2013-04-05T19:41:52.277 に答える
0

これは、IE8の問題を並べ替えるときに偶然見つけた便利なプラグインでした。IE8 EXPANDSELECTWIDTHをご覧ください。素晴らしい作品。簡単なプラグアンドプレイ。

于 2013-05-08T09:40:31.437 に答える
0

それが役立つかもしれないリンクをたどってください。

<script>
  $(document).ready(function() {
    $('select').change(function(){
      $("#width_tmp").html($('select option:selected').text());
      $(this).width($("#width_tmp").width()+30); // 30 : the size of the down arrow of the select box 
    });
  });
</script>
于 2015-01-20T10:46:23.110 に答える
-4

属性設定を変更する必要があると思います。width固定168px使用ではなく、width:auto;完全に機能するはずです。

于 2012-09-07T13:24:48.027 に答える