選擇固定寬度的下拉列表切斷IE中的內容

Question

問題：

select中的某些項目需要超過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:#333333;
    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:#333333;
    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>

Answer 1

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

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

（如果selectbox是具有固定寬度的容器的子項，則需要設置position屬性。）

不幸的是IE 7及更少不支持：焦點選擇器。

Answer 2

關於這個問題我做了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"));

           });
        }
      });
    }
    }

Answer 3

對於一個簡單的無Javascript解決方案，根據您的要求，為您的<option>添加title屬性可能就足夠了。

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

無論<select>的寬度如何，這都將在懸停<option>時以工具提示的方式顯示截止文本。

適用於IE7 +。

Answer 4

這是一個應該幫助你的小腳本：

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

Answer 5

不是javascript免費我害怕，但我設法使用jQuery使其非常小

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

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

});

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

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

});

Answer 6

只需將此插件用於jquery;）

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

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

Answer 7

對MainMa和user558204（感謝大家）的代碼進行小的，但希望有用的更新，刪除不必要的每個循環，將$（this）的副本存儲在每個事件處理程序的變量中，因為它不止一次使用，也結合了模糊和更改事件，因為他們有相同的動作。

是的，它仍然不完美，因為它調整了select元素的大小，而不僅僅是下拉選項。 但是，嘿，它讓我脫離了泡沫，我（非常，非常不幸）仍然需要支持整個企業的IE6主導用戶群。

// IE test from from: https://gist.github.com/527683
var ie = (function () {
  var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
  );
  return v > 4 ? v : undef;
} ());


function badFixSelectBoxDataWidthIE() {
  if (ie < 9) {
    $('select').not('[multiple]')
      .mousedown(function() {
        var t = $(this);
        if (t.css("width") != "auto") {
          var width = t.width();
          t.data("ow", t.css("width")).css("width", "auto");

          // If the width is now less than before then undo
          if (t.width() < width) {
            t.unbind('mousedown');
            t.css("width", t.data("ow"));
          }
        }
      })

      //blur or change if the user does change the value
      .bind('blur change', function() {
        var t = $(this);
        t.css("width", t.data("ow"));
      });
  }
}

Answer 8

有一個完整的jQuery插件可用，請查看演示頁面： http ： //powerkiki.github.com/ie_expand_select_width/

免責聲明：我編寫了那個東西，歡迎補丁

Answer 9

為什么有人想在下拉列表中使用鼠標懸停事件？ 這是一種操作IE8的方法，用於下拉列表的工作方式：

首先，讓我們確保我們只在IE8中傳遞我們的函數：

    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
       //fix me code
    }

然后，為了允許select在內容區域之外擴展，讓我們使用正確的結構包裝div中的下拉列表（如果還沒有），然后調用輔助函數：

        var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
        $('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');

        //helper function for fix
        ddlFix();
    }

現在進入活動。 由於IE8因為任何原因而在聚焦后拋出一個事件，因此在嘗試擴展時，IE將在渲染后關閉窗口小部件。 解決方法是綁定到'focusin'和'focusout'這個類，它將根據最長的選項文本自動擴展。 然后，為了確保不縮小超過默認值的恆定最小寬度，我們可以獲得當前選擇列表寬度，並將其設置為'onchange'綁定上的下拉列表min-width屬性：

    function ddlFix() {
    var minWidth;

    $('select')

    .each(function () {
        minWidth = $(this).width();
        $(this).css('min-width', minWidth);
    })
    .bind('focusin', function () {
        $(this).addClass('expand');
    })
    .change(function () {
        $(this).css('width', minWidth);
    })
    .bind('focusout', function () {
        $(this).removeClass('expand');
    });
}

最后，確保在樣式表中添加此類：

 select:focus, select.expand {
    width: auto;
}

Answer 10

我找到了一個非常直接的解決方案。 在<select> html元素中添加以下屬性：

onmouseover="autoWidth(this)" 
onblur="resetWidth(this)"

因此，每當用戶點擊時，寬度將自動展開，並且用戶移出選擇框，寬度將重置為原始寬度。

Answer 11

一種不同的方法：

而不是選擇使其成為編輯框，禁用，以便沒有人可以手動輸入任何內容或在選擇后更改內容
另一個隱藏的編輯，包含所選選項的ID（如下所述）
制作一個按鈕[..]並編寫腳本以顯示下面的div
在編輯框下方或附近創建一個具有絕對位置的隱藏div
使該div包含樣式大小=“6”的選擇（顯示6個選項和滾動條而不是下拉列表）和按鈕“選擇”並可能“取消”
不要設置寬度，所以整個事物將假設最寬的選項或按鈕的寬度加上你選擇的一些填充
腳本“選擇”按鈕將所選選項的ID復制到隱藏的編輯框，並將其值顯示為可見的選項，同時再次隱藏div。

共有4個簡單的javascript命令。

Answer 12

類似的解決方案可以在這里使用jquery設置焦點（或鼠標中心）時的自動寬度，並在模糊（或鼠標離開）時設置原始寬度http://css-tricks.com/select-cuts-off-options-in -ie-fix / 。

Answer 13

for (i=1;i<=5;i++){
   idname = "Usert" + i;
   document.getElementById(idname).style.width = "100%";

}

當寬度未正確顯示時，我用這種方式顯示下拉列表。

它適用於IE6，Firefox和Chrome。

Answer 14

它在所有版本的IE，Chrome，FF和Safari中進行了測試

// JavaScript代碼

    <script type="text/javascript">
    <!-- begin hiding
    function expandSELECT(sel) {
      sel.style.width = '';
    }
    function contractSELECT(sel) {
      sel.style.width = '100px';
    }
    // end hiding -->
    </script>

// Html code

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

Answer 15

我還有另外一個貢獻。 我寫了一段時間，你可能會覺得有用： http ： //dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

這是一個jquery插件，可以創建一個由隱藏的select元素支持的可樣式無序列表。

源代碼在github上： https ： //github.com/tncbbthositg/GiantDropdown

您將能夠處理UL上無法使用SELECT的行為和樣式。 其他所有內容應該是相同的，因為選擇列表仍然存在，它只是隱藏但UL將其用作后備數據存儲（如果您願意）。

Answer 16

這是一個實際有效的解決方案。

它在IE中設置寬度並且不會弄亂您的頁面布局，並且當您將鼠標懸停在此頁面上的某些其他解決方案之類的選項上時不會關閉下拉列表。

但是，您需要更改margin-right值和寬度值，以匹配您對選擇字段的值。

您也可以用$('#Your_Select_ID_HERE')替換$('select') $('#Your_Select_ID_HERE')以僅影響特定的選擇字段。 以及你將需要調用函數fixIESelect()對身體onload使用DOM或通過jQuery ready ，因為我在我下面的代碼所做的：

//////////////////////////
// FIX IE SELECT INPUT //
/////////////////////////
window.fixIESelect_clickset = false;
function fixIESelect()
{
 if ($.browser.msie)
 {
  $('select').mouseenter(function ()
  {
   $(this).css("width","auto");
   $(this).css("margin-right","-100");
  });
  $('select').bind('click focus',function ()
  {
   window.fixIESelect_clickset = true;
  });
  $('select').mouseout(function ()
  {
   if(window.fixIESelect_clickset != true)
   {
    $(this).css("width","93px");
    window.fixIESelect_clickset = false;
   }
  });
  $('select').bind('blur change',function ()
  {
   $(this).css("width","93px");
  });
 }
}
/////////////
// ONLOAD //
////////////
$(document).ready(function()
{
 fixIESelect();
});

Answer 17

我希望這可以使用我動態添加到頁面的選擇，所以經過大量的實驗，我最終給出了我想用“fixedwidth”類做的所有選擇，然后添加了以下CSS：

table#System_table select.fixedwidth { width: 10em; }
table#System_table select.fixedwidth.clicked { width: auto; }

和這段代碼

<!--[if lt IE 9]>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(document).on(
              {
                'mouseenter': function(event) {
                    jQuery(this).addClass('clicked');
                    },
                'focusout change blur': function() {
                    jQuery(this).removeClass('clicked');
                    }
              }, 'select.fixedwidth');
        });
    </script>
<![endif]-->

有幾點需要注意：

盡管我的選擇都在一個表中，但我必須在jQuery(document).on上“on”而不是jQuery('table#System_table').on
盡管jQuery文檔說使用“ mouseleave ”而不是“ blur ”，但我發現在IE7中，當我將鼠標向下移動到下拉列表時，它會得到一個mouseleave事件，但不會出現blur 。

Answer 18

對於我的布局，我不想要一個黑客（沒有寬度增加，沒有點擊自動，然后來到原始）。 它破壞了我現有的布局。 我只是想讓它像其他瀏覽器一樣正常工作。

我發現這完全是這樣的： -

http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html

Answer 19

如果在選擇選項后不關心奇怪視圖（即選擇跳轉到新頁面），則解決方法：

<!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. -->
<div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'>
  <select onchange='jump();'>
    <!-- '&#9660;(▼)' produces a fake dropdown indicator -->
    <option value=''>Jump to ... &#9660;</option>
    <option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
    ...
  </select>
</div>

Answer 20

不是javascript免費，我也害怕，我的解決方案確實需要一個js庫，但是，你只能使用你需要的那些文件而不是全部使用它們，也許最適合那些已經在他們的項目中使用YUI或決定哪些一個用。 看看： http ： //ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

我的博客文章也討論了其他解決方案，其中一個在stackoverflow上被引用回來，為什么我回去創建自己的SELECT元素是因為簡單的原因，我不喜歡mouseover擴展事件。 也許如果這也有助於其他人！

Answer 21

一個純粹的CSS解決方案： http ： //bavotasan.com/2011/style-select-box-using-only-css/

 .styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; } .styled-select { width: 240px; height: 34px; overflow: hidden; background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd; border: 1px solid #ccc; }

 <div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div>

Answer 22

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');
    })
    }
}

Answer 23

最佳解決方案：css + javascript

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

選擇固定寬度的下拉列表切斷IE中的內容

問題描述

23 個解決方案

解決方案1
29 已采納 2010-12-22 15:31:15

解決方案2
10

解決方案3
7 2011-02-10 12:28:52

解決方案4
7 2009-03-25 18:10:01

解決方案5
3 2009-07-17 13:01:25

解決方案6
3 2011-10-06 14:14:51

解決方案7
2 2012-05-01 23:46:29

解決方案8
1 2012-08-20 11:41:47

解決方案9
1 2012-09-20 20:00:34

解決方案10
1 2010-05-14 05:50:53

解決方案11
1 2010-09-30 17:06:45

解決方案12
1 2011-02-21 03:41:41

解決方案13
1 2011-05-04 01:54:03

解決方案14
0 2012-05-08 11:51:17

解決方案15
0 2012-06-26 16:12:53

解決方案16
0 2012-07-19 19:30:44

解決方案17
0 2012-09-08 19:57:31

解決方案18
0 2015-01-10 04:14:10

解決方案19
0 2015-06-26 02:54:34

解決方案20
0 2010-07-02 11:59:26

解決方案21
0 2015-08-07 08:05:31

解決方案22
0 2011-09-05 19:33:09

解決方案23
-1 2013-06-12 12:26:50

選擇固定寬度的下拉列表切斷IE中的內容

問題描述

23 個解決方案

解決方案1 29 已采納 2010-12-22 15:31:15

解決方案2 10

解決方案3 7 2011-02-10 12:28:52

解決方案4 7 2009-03-25 18:10:01

解決方案5 3 2009-07-17 13:01:25

解決方案6 3 2011-10-06 14:14:51

解決方案7 2 2012-05-01 23:46:29

解決方案8 1 2012-08-20 11:41:47

解決方案9 1 2012-09-20 20:00:34

解決方案10 1 2010-05-14 05:50:53

解決方案11 1 2010-09-30 17:06:45

解決方案12 1 2011-02-21 03:41:41

解決方案13 1 2011-05-04 01:54:03

解決方案14 0 2012-05-08 11:51:17

解決方案15 0 2012-06-26 16:12:53

解決方案16 0 2012-07-19 19:30:44

解決方案17 0 2012-09-08 19:57:31

解決方案18 0 2015-01-10 04:14:10

解決方案19 0 2015-06-26 02:54:34

解決方案20 0 2010-07-02 11:59:26

解決方案21 0 2015-08-07 08:05:31

解決方案22 0 2011-09-05 19:33:09

解決方案23 -1 2013-06-12 12:26:50

解決方案1
29 已采納 2010-12-22 15:31:15

解決方案2
10

解決方案3
7 2011-02-10 12:28:52

解決方案4
7 2009-03-25 18:10:01

解決方案5
3 2009-07-17 13:01:25

解決方案6
3 2011-10-06 14:14:51

解決方案7
2 2012-05-01 23:46:29

解決方案8
1 2012-08-20 11:41:47

解決方案9
1 2012-09-20 20:00:34

解決方案10
1 2010-05-14 05:50:53

解決方案11
1 2010-09-30 17:06:45

解決方案12
1 2011-02-21 03:41:41

解決方案13
1 2011-05-04 01:54:03

解決方案14
0 2012-05-08 11:51:17

解決方案15
0 2012-06-26 16:12:53

解決方案16
0 2012-07-19 19:30:44

解決方案17
0 2012-09-08 19:57:31

解決方案18
0 2015-01-10 04:14:10

解決方案19
0 2015-06-26 02:54:34

解決方案20
0 2010-07-02 11:59:26

解決方案21
0 2015-08-07 08:05:31

解決方案22
0 2011-09-05 19:33:09

解決方案23
-1 2013-06-12 12:26:50