选择固定宽度的下拉列表切断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