html - IE8の固定幅選択の問題

Question

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のみのソリューションを好みます

score 10 · Accepted Answer

修正しました！

改訂された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">

score 2 · Accepted Answer

私は他のすべての答えが本当に不安定で複雑すぎることに気づきました。これは、次の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や条件付きコメントなどは必要ありません。少なくとも私のニーズでは、はるかに単純で、はるかにスムーズに機能します。

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

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

score 1 · Accepted Answer

問題のページは非常に古いページであり、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"));
  });

score 1 · Accepted Answer

私も同じ問題を抱えていて、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');
});

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

<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>

score -4 · Accepted Answer

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

html - IE8の固定幅選択の問題

7 に答える 7

Related

Reference