问题：
select中的某些项目需要超过145px的指定宽度才能完全显示。
Firefox行为：点击选择会显示调整为最长元素宽度的下拉元素列表。
IE6＆amp; IE7行为：点击选择会显示下拉元素列表限制为145px宽度，因此无法读取更长的元素。
当前用户界面要求我们在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>
答案 0 :(得分：29)
对于IE 8，有一个简单的纯css解决方案：
select:focus {
width: auto;
position: relative;
}
（如果selectbox是具有固定宽度的容器的子项，则需要设置position属性。）
不幸的是，IE 7及更少版本不支持：焦点选择器。
答案 1 :(得分：10)
关于这个问题我做了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"));
});
}
});
}
}
答案 2 :(得分：7)
这是一个应该帮助你的小脚本：
答案 3 :(得分：7)
对于一个简单的无Javascript解决方案，根据您的要求，在保存文字的＆lt; option＆gt;中添加title属性可能就足够了。
<option value="242" title="Very long and extensively descriptive text">
Very long and extensively descriptive text
</option>
无论＆lt; select＆gt;的宽度如何，这都将在悬停＆lt;选项＆gt;时以工具提示的方式显示截止文本。
适用于IE7 +。
答案 4 :(得分：3)
我不担心javascript，但我设法使用jQuery使其变得非常小
$('#del_select').mouseenter(function () {
$(this).css("width","auto");
});
$('#del_select').mouseout(function () {
$(this).css("width","170px");
});
答案 5 :(得分：3)
只需将此插件用于jquery;）
http://plugins.jquery.com/project/skinner
$(function(){
$('.select1').skinner({'width':'200px'});
});
答案 6 :(得分：2)
MainMa＆amp; amp;的代码很小但很有用。 user558204（感谢大家），它删除了不必要的每个循环，将$（this）的副本存储在每个事件处理程序的变量中，因为它不止一次使用，也结合了blur＆amp;改变事件，因为他们有相同的行动。
是的，它仍然不完美，因为它调整了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"));
});
}
}
答案 7 :(得分：1)
此处可以找到类似的解决方案，使用jquery设置焦点（或鼠标中心）时的自动宽度，并在模糊（或鼠标移动）http://css-tricks.com/select-cuts-off-options-in-ie-fix/时设置原始宽度。
答案 8 :(得分：1)
for (i=1;i<=5;i++){
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
}
当宽度未正确显示时，我用这种方式显示下拉列表。
适用于IE6，Firefox和Chrome。
答案 9 :(得分：1)
我找到了一个相当直接的解决方案。在<select> html元素中添加以下属性：
onmouseover="autoWidth(this)"
onblur="resetWidth(this)"
因此，每当用户点击时，宽度将自动展开，并且用户移出选择框，宽度将重置为原始。
答案 10 :(得分：1)
另一种方法：
总共4个简单的javascript命令。
答案 11 :(得分：1)
为什么有人想在下拉列表中使用鼠标悬停事件？这是一种操作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;
}
答案 12 :(得分：1)
可以使用完整的jQuery插件，请查看演示页：http://powerkiki.github.com/ie_expand_select_width/
免责声明：我编写了那个东西，欢迎补丁答案 13 :(得分：0)
我还有另外一个贡献。我前段时间写了这篇文章，你可能会觉得有帮助：http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html
这是一个jquery插件，可以创建一个由隐藏的select元素支持的可样式无序列表。
源代码位于github：https://github.com/tncbbthositg/GiantDropdown
您将能够处理UL上无法使用SELECT的行为和样式。其他所有内容都应该是相同的，因为选择列表仍然存在，它只是隐藏，但UL会将其用作后备数据存储（如果可以的话）。
答案 14 :(得分：0)
纯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>
答案 15 :(得分：0)
如果您在选择选项后不关心奇怪的视图（即选择跳转到新页面），则可以采用解决方法：
<!-- 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>
答案 16 :(得分：0)
对于我的布局，我不想要黑客（没有宽度增加，没有点击自动，然后来到原始）。它破坏了我现有的布局。我只是想让它像其他浏览器一样正常工作。
我发现这完全是这样的： -
http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html
答案 17 :(得分：0)
我希望这可以使用我动态添加到页面的选择，所以经过大量的实验，我最终给出了我想用“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而不是jQuery('table#System_table').on mouseleave”而不是“blur”，我发现在IE7中当我将鼠标移到下拉列表中时，它会获得mouseleave个活动但不是blur。答案 18 :(得分：0)
这是一个实际有效的解决方案。
它设置IE中的宽度并且不会弄乱您的页面布局，并且当您将鼠标悬停在此页面上的某些其他解决方案之类的选项上时不会关闭下拉列表。
但是，您需要更改margin-right值和宽度值，使其与您选择的字段相匹配。
此外，您可以将$('select')替换为$('#Your_Select_ID_HERE')，以仅影响特定的选择字段。同样，您需要在正文fixIESelect()上调用函数onload或使用DOM ready调用jQuery，就像我在下面的代码中所做的那样：
//////////////////////////
// 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();
});
答案 19 :(得分：0)
在所有版本的IE，Chrome，FF＆amp; 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>
答案 20 :(得分：0)
我改进了jquery BalusC's解决方案。也用于：Brad Robertson的comment here。
将它放在.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');
})
}
}
答案 21 :(得分：0)
不是javascript免费的，我也害怕，我的解决方案确实需要一个js库，但是，你只能使用你需要的那些文件而不是全部使用它们，也许最适合那些已经在他们的项目中使用YUI的人或决定使用哪一个。看看：http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/
我的博客文章也讨论了其他解决方案，其中一个在stackoverflow上被引用回来，为什么我回去创建自己的SELECT元素是因为简单的原因，我不喜欢mouseover扩展事件。也许如果这对其他人也有帮助呢！
答案 22 :(得分：-1)
最佳解决方案：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"));
});