html - 选择固定宽度的下拉菜单，在 IE 中截断内容

Question

问题：

选择中的某些项目需要超过 145px 的指定宽度才能完全显示。

Firefox 行为：单击选择显示下拉元素列表调整为最长元素的宽度。

IE6 和 IE7 行为：单击选择显示下拉元素列表限制为 145 像素宽度，从而无法读取较长的元素。

当前的 UI 要求我们将此下拉列表调整为 145 像素，并让它托管具有更长描述的项目。

关于解决 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>

score 30 · Accepted Answer

对于 IE 8，有一个简单的纯 CSS 解决方案：

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

（如果选择框是具有固定宽度的容器的子容器，则需要设置位置属性。）

不幸的是，IE 7 和更低版本不支持 :focus 选择器。

score 10 · Accepted Answer

我对这个问题进行了谷歌搜索，但没有找到任何最佳解决方案，因此创建了一个适用于所有浏览器的解决方案。

只需在页面加载时调用 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"));

           });
        }
      });
    }
    }

score 7 · Accepted Answer

7

这是一个可以帮助您的小脚本：

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

于 2009-03-25T18:10:01.580 回答

score 7 · Accepted Answer

对于一个简单的无 Javascript 解决方案，根据您的要求，将标题属性添加到保存文本的 <option> 可能就足够了。

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

这将在悬停 <option> 时以工具提示方式显示截断文本，而不管 <select> 的宽度如何。

适用于 IE7+。

score 3 · Accepted Answer

恐怕不是免费的 javascript，但我设法使用 jQuery 使它变得非常小

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

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

});

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

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

});

score 3 · Accepted Answer

只需您可以将此插件用于 jquery ;)

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

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

score 2 · Accepted Answer

对 MainMa 和 user558204 的代码进行了小但希望有用的更新（谢谢大家），它删除了不必要的每个循环，将 $(this) 的副本存储在每个事件处理程序的变量中，因为它被多次使用，还结合了模糊和更改事件，因为它们具有相同的操作。

是的，它仍然不完美，因为它调整了选择元素的大小，而不仅仅是下拉选项。但是，嘿，它让我摆脱了困境，我（非常非常不幸）仍然必须支持整个企业中以 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"));
      });
  }
}

score 1 · Accepted Answer

我找到了一个非常简单的解决方法。在<select>html 元素中添加以下属性：

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

因此，每当用户单击该宽度将自动扩展，并且用户移出选择框时，宽度将重置为原始宽度。

score 1 · Accepted Answer

另一种方法：

而不是选择使其成为编辑框，禁用，因此没有人可以手动输入任何内容或在选择后更改内容
另一个隐藏的编辑，包含所选选项的 id（解释如下）
制作一个按钮 [..] 并编写脚本以显示下面的 div
在编辑框下方或附近制作一个绝对位置的隐藏 div
使该 div 包含一个样式 size="6" 的选择（以显示 6 个选项和一个滚动条而不是下拉列表）和一个按钮“选择”，也许还有“取消”
不要设置宽度样式，因此整个事情将假定最宽选项或按钮的宽度加上您选择的一些填充
编写“选择”按钮以将所选选项的 id 复制到隐藏的编辑框，并将其值复制到可见的编辑框中，也可以再次隐藏 div。

总共 4 个简单的 JavaScript 命令。

score 1 · Accepted Answer

可以在此处找到类似的解决方案，使用 jquery 设置焦点（或鼠标输入）时的自动宽度，并在模糊（或鼠标离开）时设置原始宽度http://css-tricks.com/select-cuts-off-options-in -即修复/。

score 1 · Accepted Answer

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

}

当宽度显示不正确时，我使用这种方式显示下拉列表。

它适用于 IE6、Firefox 和 Chrome。

score 1 · Accepted Answer

一个完整的 jQuery 插件可用，查看演示页面： http: //powerkiki.github.com/ie_expand_select_width/

免责声明：我编写了那个东西，欢迎使用补丁

score 1 · Accepted Answer

为什么有人想要下拉列表中的鼠标悬停事件？以下是一种操作 IE8 的方法，以实现下拉列表的工作方式：

首先，让我们确保我们只在 IE8 中传递我们的函数：

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

然后，为了让选择扩展到内容区域之外，让我们用正确的结构将下拉列表包装在 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”绑定上的下拉列表最小宽度属性：

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

score 0 · Accepted Answer

恐怕不是 javascript 免费的，而且我的解决方案确实需要一个 js 库，但是，您只能使用您需要的那些文件，而不是全部使用它们，也许最适合那些已经在他们的项目中使用 YUI 或决定使用哪些文件的人一个使用。看看：http ://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

我的博客文章还讨论了其他解决方案，其中一个在 stackoverflow 上被引用回此处，为什么我回去创建自己的 SELECT 元素是因为简单的原因，我不喜欢 mouseover 展开事件。也许如果这对其他人也有帮助！

score 0 · Accepted Answer

jquery BalusC 的解决方案由我改进。也使用：布拉德罗伯逊的评论在这里。

只需将它放在 .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');
    })
    }
}

score 0 · Accepted Answer

已在所有版本的 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>

score 0 · Accepted Answer

我对此还有另一个贡献。我不久前写了这篇文章，您可能会觉得有帮助：http ://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

这是一个 jquery 插件，用于制作由隐藏的选择元素支持的可样式化无序列表。

源码在github上：https ://github.com/tncbbthositg/GiantDropdown

您将能够处理 UL 上无法使用 SELECT 处理的行为和样式。其他一切都应该是一样的，因为选择列表仍然存在，它只是被隐藏了，但 UL 将使用它作为支持数据存储（如果你愿意的话）。

score 0 · Accepted Answer

这是一个实际有效的解决方案。

它在 IE 中设置宽度，并且不会弄乱您的页面布局，并且当您将鼠标悬停在选择选项上时，它不会关闭下拉列表，就像此页面上的其他一些解决方案一样。

但是，您需要更改margin-right值和宽度值以匹配您选择字段的值。

您也可以将替换$('select')为$('#Your_Select_ID_HERE')仅影响特定的选择字段。您还需要使用 DOMfixIESelect()在主体上onload或通过 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();
});

score 0 · Accepted Answer

我希望它可以与我动态添加到页面的选择一起使用，所以经过大量实验后，我最终给出了我想要使用“固定宽度”类执行此操作的所有选择，然后添加了以下 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而不是jQuery('table#System_table').on
尽管 jQuery 文档说使用“ mouseleave”而不是“ blur”，但我发现在 IE7 中，当我将鼠标向下移动到下拉列表时，它会得到一个mouseleave事件而不是blur.

score 0 · Accepted Answer

对于我的布局，我不想要一个 hack（不增加宽度，不点击自动然后进入原始状态）。它打破了我现有的布局。我只是希望它像其他浏览器一样正常工作。

我发现这完全一样：-

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

score 0 · Accepted Answer

如果您在选择选项后不关心奇怪的视图（即选择跳转到新页面），则一种解决方法：

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

score 0 · Accepted Answer

一个纯 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>

score -1 · Accepted Answer

最佳解决方案：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"));
  });

html - 选择固定宽度的下拉菜单，在 IE 中截断内容

23 回答 23

Related

Reference