HTML選擇選項寬度在IE中被裁剪。任何解決方案

在Mozilla和非IE瀏覽器中，如果選擇列表的選項長度比選擇寬度更大，則會顯示出來。但在IE中，它會將選項裁剪至選定的寬度。HTML選擇選項寬度在IE中被裁剪。任何解決方案

有什麼辦法讓IE的選擇行爲像非IE瀏覽器那樣？

2009-06-19 Shyju

其IE瀏覽器版本，你有一個問題？ – 2009-06-19 12:15:49

IE 6.0我查了 – Shyju 2009-06-19 12:16:43

此問題已被提問。看到這裏：http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie，http://stackoverflow.com/questions/294040/how-to-expand-select-option-width-after-the -user-want-to-select-an-option和http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie – mercator 2009-06-20 15:56:12

CSS：

.set_width { width:120px; }

HTML：

<select class="set_width"><option>one</option><option>two</option></select>

來源

2009-06-19 12:16:36

這將限制爲120像素，如果我的選項的長度超過該長度，該怎麼辦？ – Shyju 2009-06-19 12:54:26

那麼，任何選擇框的默認值就是增長到它需要的寬度。如果這是您需要支持的情況，您可能不想修復它的寬度。 – ajm 2009-06-19 19:09:32

OK所以這裏是我很長一段時間後，想出解決方案。它會根據子選項的最大寬度自動增加選擇框的大小。

<script type="text/javascript"> 
    window.onload = function() 
    { 
    var elem = document.getElementById('test'); 
    var values = elem.length; 
    var biggest_value = 0; 
    var biggest_option = ''; 

    for(var i = 0; i <= values; i++) 
    { 
     if (elem.options[i]) 
     { 
     var len = elem.options[i].value.length; 
     } 

     if (biggest_value < len) 
     { 
     biggest_value = len; 
     biggest_option = elem.options[i]; 
     } 
    } 

    document.getElementById('test').style.width = biggest_option.offsetWidth + 'px'; 

}; 
</script>

選擇框：

<select id="test"> 
<option value="Hello">Hello</option> 
<option value="Hello Again">Hello Again</option> 
<option value="Hello Yet Again">Hello Yet Again</option> 
</select>

來源

2009-12-18 05:36:43 Sarfraz

，以確保選擇列表總是完全一樣寬，他們需要的是絕對最簡單的方法是讓瀏覽器設置其寬度，即不要」你自己設定一個寬度。這種「方法」（真的不是方法，因爲它涉及而不是）可以在任何有史以來的瀏覽器上工作，甚至IE6。

來源

2010-01-07 14:46:17 Martha

我有一個適合我的解決方案，所以我想我會繼續併發布它（在底部有一些注意事項）。我相信這不是jQuery最有效的使用方式，但它的工作方式正是我想要的。基本上，我有一個時區的列表（顯然）是相當長的文本字符串。

<!--[if IE]> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("select.timeZone") 
     .mouseover(function() { 
      $(this) 
       .data("origWidth", $(this).css("width")) 
       .css("width", "auto") 
       .focus(); 
     }) 
     .mouseout(function() { 
      $(this) 
       .blur(function() { 
        $(this).css("width", $(this).data("origWidth")); 
       }) 
       .change(function() { 
        $(this).css("width", $(this).data("origWidth")); 
       }) 
     }); 
    }); 
</script> 
<![endif]-->

描述：

僅供IE瀏覽器有條件地設置。
此解決方案是Chris Coyier（http://css-tricks.com/select-cuts-off-options-in-ie-fix/）提供的腳本的修改版本。
此外，這個解決方案假設你和我一樣，並不真正關心IE6。基本的功能在那裏，所以IE6瀏覽器仍然可以看到大部分的選擇選項，提交表單等，但我不能再浪費任何時間來安撫這個小的子組。

注意事項：

的選擇列表有一個固定的寬度它集中了。
在鼠標懸停時，列表必須在大小恢復爲原始固定寬度之前模糊或更改。我確定選擇列表模糊或首先改變的原因是，因爲以前，只要鼠標離開選擇框，就會觸發onmouseout（這意味着您可以嘗試並選擇一個選項，但在點擊之前它們會消失））。
相反，在鼠標懸停時，焦點被設置爲確保模糊事件被正確觸發。

來源

2010-01-21 18:31:00 26design

這裏的另一種方法是爲我工作：

<style> 
select.limited-width { 
    width: 200px; 
    position: static; 
} 

select.expanded-width { 
    width: auto; 
    position: absolute; 
} 
</style> 

<select class="limited-width" 
     onMouseDown="if(document.all) this.className='expanded-width';" 
     onBlur="if(document.all) this.className='limited-width';" 
     onChange="if(document.all) this.className='limited-width';"> 

    <option>A normal option</option> 
    <option>A really long option which messes everything up</option> 
</select>

通過切換到的位置是：絕對的，你從頁面流，如果你發現當你展開它的選擇框移動，這有助於刪除元素。

我選擇依靠嗅探document.all作爲IE的檢查，因爲它保持緊湊，並避免需要一個單獨的功能。如果這不適合你，請在IE條件註釋中定義一個函數，然後調用它。

一個小bug，如果你選擇，直到您將焦點移到另一個元素，它將不會再次縮小相同的元素，我稱這是一個功能;-)

來源

2010-02-17 00:27:20 simoncoggins

我喜歡26design的解決方案，但它有2個缺陷：

在某些情況下有可能激發兩次導致origWidth變量鼠標懸停事件設置成「自動」防止選擇永遠恢復到原來的大小。
如果下拉菜單中的文本值不需要額外的空間，那麼select實際上會縮小，看起來很奇怪。

該版本修復了兩個問題：

if($.browser.msie) { 
    /* IE obscures the option text for fixed-width selects if the text 
    * is longer than the select. To work around this we make the width 
    * auto whenever the drop down is visible. 
    */ 
    $("select.fixed-width").livequery(function(){ 
     /* Use mousedown rather than focus because the focus event gets 
     * interrupted and the dropdown does not appear 
     */ 
     $(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).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")); 

     }); 
    }); 
}

測試在IE6-8

來源

2010-05-18 16:25:38

這似乎在迫使IE瀏覽器重新評估選擇寬度很好地工作。適用於IE7和IE8。

if (jQuery.browser.msie) { 
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto'); 
}

來源

2010-07-22 18:20:56 peter

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

}

我用這樣的方式來顯示下拉列表時寬度不正確顯示。

它適用於IE6，Firefox和Chrome。

來源

2011-05-04 01:41:23 keong

我在表格單元格中選擇的和下面的代碼並獲得成功對我來說：

.myClass{ 
    width: 100%;//most of browsers 
    _width: auto;//ie6 hack 
}

乾杯

來源

2011-08-31 07:48:43

我放在一個表格單元格，只是想保持與細胞相同的寬度。

$("#id").width($("#id").parent().width());

btw，感謝所有的帖子，它幫助我很多。

來源

2012-01-05 10:56:04 bkuo

最好的解決辦法說明如下：http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

來源

2012-10-23 15:19:08

HTML選擇選項寬度在IE中被裁剪。任何解決方案

回答

相關問題