在 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 中选择固定宽度切割内容的下拉菜单