在 IE 中選擇固定寬度切割內容的下拉選單

問題描述

問題：

選擇中的某些專案需要超過 145px 的指定寬度才能完全顯示。

Firefox 行為：點選選擇顯示下拉元素列表調整為最長元素的寬度。

IE6& IE7 行為：點選選擇顯示下拉元素列表限制為 145px 寬度，使得不可能讀取較長的元素。

當前的 UI 需要我們將這個下拉式清單設定為 145px，並且具有較長描述的主題項。

任何關於用 IE 解決問題的建議？

即使展開列表，頂級元素也應保持 145px 寬。

謝謝！

css：

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#343b49;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

這是選擇輸入程式碼 (目前沒有 backend_dropbox 樣式的定義)

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

完整的 html 頁面，以防您想在瀏覽器中快速測試：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#343b49;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>

最佳解決方案

對於 IE 8，有一個簡單的純 css-based 解決方案：

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

(如果選擇框是具有固定寬度的容器的子級，則需要設定 position 屬性。)

不幸的是 IE 7 以下不支援：focus 選擇器。

次佳解決方案

我在 Google 上關於這個問題，但沒有找到任何最佳解決方案，所以建立一個解決方案，在所有瀏覽器中都可以正常工作。

只需在頁面載入時呼叫 badFixSelectBoxDataWidthIE() 功能。

function badFixSelectBoxDataWidthIE(){
    if ($.browser.msie){
      $('select').each(function(){
    if($(this).attr('multiple')== false){
      $(this)
          .mousedown(function(){
               if($(this).css("width") != "auto") {
                   var width = $(this).width();
                   $(this).data("origWidth", $(this).css("width"))
                          .css("width", "auto");
                   /* if the width is now less than before then undo */
                   if($(this).width() < width) {
        $(this).unbind('mousedown');
                       $(this).css("width", $(this).data("origWidth"));
                   }
               }
           })
           /* Handle blur if the user does not change the value */
           .blur(function(){
               $(this).css("width", $(this).data("origWidth"));

           })
           /* Handle change of the user does change the value */
           .change(function(){
               $(this).css("width", $(this).data("origWidth"));

           });
        }
      });
    }
    }

第三種解決方案

這是一個小指令碼，應該幫助你：

http://www.icant.co.uk/forreview/tamingselect/

第四種方案

對於簡單的 Javascript-free 解決方案，根據您的要求，將 title-attribute 新增到您的< 選項> 持有文字可能就足夠了。

<option value="242" title="Very long and extensively descriptive text">
  Very long and extensively descriptive text
</option>

懸停「< option>」即可顯示 tool-tip 中的 cut-off 文字，無論< select> 的寬度。

適用於 IE7 +。

第五種方案

不是 javascript 免費我害怕，但我設法使它相當小使用 jQuery

$('#del_select').mouseenter(function () {

    $(this).css("width","auto");

});

$('#del_select').mouseout(function () {

    $(this).css("width","170px");

});

第六種方案

只需你可以使用這個外掛來進行 jquery;)

http://plugins.jquery.com/project/skinner

$(function(){
          $('.select1').skinner({'width':'200px'});
});

參考文獻

Select dropdown with fixed width cutting off content in IE

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在 IE 中選擇固定寬度切割內容的下拉選單