在IE中select固定宽度的下拉菜单
问题：
一些在select的项目需要超过145px的指定宽度才能完整显示。
Firefox的行为 ：点击select显示调整到最长元素宽度的下拉元素列表。
IE6和IE7的行为 ：点击select显示下拉元素列表限制为145px宽度，使其无法阅读更长的元素。
目前的用户界面要求我们将这个下拉菜单放在145px中，并让它的主机项目有更长的描述。
任何build议解决与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; } 这里是selectinput代码（目前没有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>
如果您想在浏览器中快速testing，请使用完整的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>
对于IE 8，有一个简单的纯粹的基于CSS的解决scheme：
select:focus { width: auto; position: relative; }
（如果select框是宽度固定的容器的子项，则需要设置position属性。）
不幸的是，IE 7和更less不支持：焦点select器。
我做了关于这个问题的谷歌，但没有find任何最好的解决scheme，所以创build了一个解决scheme，在所有的浏览器工作正常。
只是在页面加载时调用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")); }); } }); } }
这是一个应该帮助你的小脚本：
对于一个简单的无Javascript解决scheme，根据您的要求，将title属性添加到您的<option>选项可能就足够了。
<option value="242" title="Very long and extensively descriptive text"> Very long and extensively descriptive text </option>
这将在hover<option>时以工具提示方式显示截断文本，而不pipe<select>的宽度如何。
适用于IE7 +。
我不害怕，但我设法让它使用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'}); });
小，但希望有用的更新从MainMa＆user558204（谢谢你们）的代码，删除不必要的每个循环，将$（this）的副本存储在每个事件处理程序中的variables中，因为它已被多次使用，模糊和改变事件，因为他们有相同的行动。
是的，它改变了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")); }); } }
一种不同的方法：
- 而不是select使其成为编辑框，禁用，以便没有人可以手动input任何内容或select后更改内容
- 另一个隐藏的编辑包含一个选定的选项的ID（解释如下）
- 做一个button[..]和脚本来显示下面的div
- 在绝对位置下或附近编辑框做一个隐藏的div
- 使该div包含样式大小=“6”（显示6个选项和一个滚动条，而不是一个下拉列表）的select和一个button“select”，也许“取消”
- 不要风格的宽度，所以整个事情将假设最宽的选项或button的宽度，也许一些填充您的select
- 脚本“select”button将选定的选项的ID复制到隐藏的编辑框，它的值是可见的，也是再次隐藏div。
总共4个简单的javascript命令。
我发现了一个非常简单的解决scheme。 在<select> html元素中添加这些属性：
onmouseover="autoWidth(this)" onblur="resetWidth(this)"
因此，无论何时用户点击宽度将自动展开，用户移出select框，宽度将被重置为原始。
类似的解决scheme可以在这里find使用jquery设置自动宽度时，焦点（或鼠标）和设置模糊宽度（或鼠标离开时） http://css-tricks.com/select-cuts-off-options-in -ie-fix / 。
for (i=1;i<=5;i++){ idname = "Usert" + i; document.getElementById(idname).style.width = "100%"; }
当宽度显示不正确时，我用这种方式显示下拉列表。
它适用于IE6，Firefox和Chrome。
一个完整的jQuery插件可用，查看演示页面： http : //powerkiki.github.com/ie_expand_select_width/
免责声明：我编码的东西，补丁欢迎
为什么会有人想在下拉列表中的鼠标hover事件？ 下面是一个操作IE8下拉列表应该如何工作的方法：
首先，让我们确保我们只在IE8中传递函数：
var isIE8 = $.browser.version.substring(0, 2) === "8."; if (isIE8) { //fix me code }
然后，为了让select在内容区域之外展开，让我们用正确的结构把我们的下拉列表包装到div中，如果还没有的话，然后调用helper函数：
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将在渲染后closures这个小部件。 解决方法是绑定到“focusin”和“focusout”类，该类将根据最长的选项文本自动扩展。 然后，为了确保一个不超过默认值的恒定最小宽度，我们可以获得当前的select列表宽度，并将其设置为'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; }
不是免费的，我也怕，我的解决scheme需要一个js库，但是，你只能使用你需要的文件，而不是全部使用它们，也许最适合那些已经使用YUI的项目或决定哪些一个使用。 看看： http : //ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/
我的博客文章也讨论了其他解决scheme，一个是在这里引用到stackoverflow，为什么我回去创build自己的SELECT元素是因为简单的原因，我不喜欢mouseover扩展事件。 也许如果这有助于其他人！
jquery BalusC的解决scheme得到了改进。 也使用：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'); }) } }
它在IE，Chrome，FF和Safari的所有版本中进行了testing
// 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>
我还有另一个贡献。 我写了一段时间，你可能会发现有帮助： http : //dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html
这是一个jQuery的插件，使隐藏的select元素支持一个可调整的无序列表。
源代码在github上： https ： //github.com/tncbbthositg/GiantDropdown
您可以在UL上处理不能使用SELECT的行为和样式。 一切都应该是相同的，因为select列表仍然存在，它只是隐藏，但UL将使用它作为后备数据存储（如果你愿意的话）。
我希望这能够与我dynamic添加到页面上的select一起工作，所以经过大量的实验后，我最终给出了所有的select，我想用类“fixedwidth”来做这个select，然后添加下面的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]-->
有几件事要注意：
- 尽pipe事实上我的select都在一个表中，我不得不对
jQuery(document).on而不是jQuery('table#System_table').on - 尽pipe事实上jQuery文档说使用“
mouseleave”而不是“blur”，我发现在IE7中，当我将鼠标移动到下拉列表中时，它会得到一个mouseleave事件，但不是blur。
这是一个实际工作的解决scheme。
它设置在IE中的宽度，并不会弄乱你的页面布局，并且当你把鼠标放在这个页面上的一些其他解决scheme的select选项上时，不会closures下拉菜单。
但是，您将需要更改页margin-right值和宽度值，以匹配您所选字段的值。
你也可以用$('#Your_Select_ID_HERE')replace$('select') $('#Your_Select_ID_HERE')来仅仅影响一个特定的select域。 同样你需要调用函数fixIESelect() onload或者通过jQuery使用DOM 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(); });
对于我的布局，我不想要一个黑客（没有增加宽度，没有与汽车点击，然后到原来的）。 它打破了我现有的布局。 我只是希望它能像其他浏览器一样正常工作。
我发现这是完全一样的： –
http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html
一个解决方法，如果你不关心在select一个选项后奇怪的看法（即select跳转到一个新的页面）：
<!-- 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();'> <!-- '▼(▼)' produces a fake dropdown indicator --> <option value=''>Jump to ... ▼</option> <option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option> ... </select> </div>
一个纯粹的CSS解决scheme： 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>
最佳解决scheme：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")); });
