HTML 选择选项宽度在 IE 中被裁剪。任何解决方案？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1017617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Select options width is cropped in IE. Any solutions?
提问by Shyju
In Mozilla and non-IE browsers, if the option of select list is of a greater length than the select's width, it will show up. But in IE, it will crop the option up to the select's width.
在 Mozilla 和非 IE 浏览器中，如果选择列表选项的长度大于选择的宽度，则会显示。但是在 IE 中，它会将选项裁剪到选择的宽度。
Is there any way to make IE's select behaviour to be like that of non-IE browsers?
有没有办法让 IE 的选择行为像非 IE 浏览器一样？
回答by peter
This seems to work well in forcing IE to reevaluate the select width. Works in IE7 and IE8.
这似乎在强制 IE 重新评估选择宽度方面效果很好。适用于 IE7 和 IE8。
if (jQuery.browser.msie) {
jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}
回答by bkuo
I placed in a table cell, just trying to keep the same width with the cell.
我放在一个表格单元格中，只是试图与单元格保持相同的宽度。
$("#id" ).width($("#id" ).parent().width());
btw, thanks for all the posts, it helps me a lot.
顺便说一句，感谢所有帖子，它对我有很大帮助。
回答by Steve Mallory
css:
css：
.set_width { width:120px; }
html:
html：
<select class="set_width"><option>one</option><option>two</option></select>
回答by Simon Dyson
I like 26design's solution but it has 2 flaws:
我喜欢 26design 的解决方案，但它有两个缺陷：
Under some circumstances it is possible to fire the mouseover event twice resulting in the origWidth variable getting set to "auto" preventing the select ever reverting to original size.
If the text values in the drop down do not need extra space then the select actually shrinks which looks odd.
在某些情况下，可能会触发两次鼠标悬停事件，导致 origWidth 变量设置为“自动”，从而阻止选择恢复到原始大小。
如果下拉列表中的文本值不需要额外的空间，那么选择实际上会缩小，这看起来很奇怪。
This version fixes both of these issues:
此版本修复了以下两个问题：
if($.browser.msie) {
/* IE obscures the option text for fixed-width selects if the text
* is longer than the select. To work around this we make the width
* auto whenever the drop down is visible.
*/
$("select.fixed-width").livequery(function(){
/* Use mousedown rather than focus because the focus event gets
* interrupted and the dropdown does not appear
*/
$(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).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"));
});
});
}
Tested in IE6-8
在 IE6-8 中测试
回答by Sarfraz
OK so here is the solution I figured out after quite some time. It will automatically increase the size of the select box based on the maximum width of the child options.
好的，这是我在一段时间后想出的解决方案。它将根据子选项的最大宽度自动增加选择框的大小。
<script type="text/javascript">
window.onload = function()
{
var elem = document.getElementById('test');
var values = elem.length;
var biggest_value = 0;
var biggest_option = '';
for(var i = 0; i <= values; i++)
{
if (elem.options[i])
{
var len = elem.options[i].value.length;
}
if (biggest_value < len)
{
biggest_value = len;
biggest_option = elem.options[i];
}
}
document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';
};
</script>
The Select Box:
选择框：
<select id="test">
<option value="Hello">Hello</option>
<option value="Hello Again">Hello Again</option>
<option value="Hello Yet Again">Hello Yet Again</option>
</select>
回答by Martha
The absolute easiest way to make sure select lists are always exactly as wide as they need to be is to allow the browser to set their width, i.e. don't set a width yourself. This "method" (really a non-method, as it involves notdoing something) will work on every browser ever made, even IE6.
确保选择列表总是与它们需要的一样宽的最简单的方法是允许浏览器设置它们的宽度，即不要自己设置宽度。这种“方法”（实际上是一种非方法，因为它涉及不做某事）将适用于所有浏览器，甚至 IE6。
回答by 26design
I have a solution that works for me, so I figured I'd go ahead and post it (with some caveats at the bottom). It's not the most efficient use of jQuery, I'm sure, but it's working how I want it to work. Basically, I have a list of timezones that are (obviously) rather long text strings.
我有一个适合我的解决方案，所以我想我会继续发布它（底部有一些警告）。我敢肯定，这不是 jQuery 最有效的使用方式，但它按我希望的方式工作。基本上，我有一个（显然）相当长的文本字符串的时区列表。
<!--[if IE]>
<script type="text/javascript">
$(document).ready(function() {
$("select.timeZone")
.mouseover(function() {
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto")
.focus();
})
.mouseout(function() {
$(this)
.blur(function() {
$(this).css("width", $(this).data("origWidth"));
})
.change(function() {
$(this).css("width", $(this).data("origWidth"));
})
});
});
</script>
<![endif]-->
Description:
描述：
- Conditionally set for IE browsers only.
- This solution is a modified version of a script provided by Chris Coyier (http://css-tricks.com/select-cuts-off-options-in-ie-fix/).
- Also, this solution assumes that you, like me, don't really care about IE6 so much. The basic functionality is there, so IE6 browsers can still see most of the select options, submit the form, etc., but I can't waste any more time trying to appease this small subgroup.
- 仅针对 IE 浏览器有条件地设置。
- 此解决方案是 Chris Coyier ( http://css-tricks.com/select-cuts-off-options-in-ie-fix/)提供的脚本的修改版本。
- 此外，此解决方案假设您和我一样并不那么关心 IE6。基本功能就在那里，所以IE6浏览器仍然可以看到大部分选择选项，提交表单等，但我不能再浪费时间试图安抚这个小子群体了。
Caveats:
注意事项：
- The select list has a fixed width before it's focused.
- Onmouseout, the list has to be blurred or changed before the size is set back to the original fixed width. The reason I made sure the select list was blurred or changed first, is because previously, onmouseout would fire off as soon as your mouse left the select box (meaning you could try and select an option, but they would disappear before you could click one).
- Conversely, on mouseover the focus is set to make sure the blur event is fired properly.
- 选择列表在聚焦之前具有固定宽度。
- 在mouseout 时，在将大小设置回原来的固定宽度之前，必须对列表进行模糊或更改。我首先确保选择列表模糊或更改的原因是因为以前，只要您的鼠标离开选择框，onmouseout 就会触发（这意味着您可以尝试选择一个选项，但它们会在您单击之前消失）。
- 相反，在鼠标悬停时设置焦点以确保正确触发模糊事件。
回答by simoncoggins
Here's another approach that worked for me:
这是另一种对我有用的方法：
<style>
select.limited-width {
width: 200px;
position: static;
}
select.expanded-width {
width: auto;
position: absolute;
}
</style>
<select class="limited-width"
onMouseDown="if(document.all) this.className='expanded-width';"
onBlur="if(document.all) this.className='limited-width';"
onChange="if(document.all) this.className='limited-width';">
<option>A normal option</option>
<option>A really long option which messes everything up</option>
</select>
By switching to position:absolute you remove the element from the page flow, which helps if you find your select box moving when you expand it.
通过切换到 position:absolute，您可以从页面流中删除元素，这有助于您在展开时发现选择框移动。
I've chosen to rely on sniffing document.all as a check for IE as it keeps it compact and avoids the need for a separate function. If that doesn't work for you, define a function within IE conditional comments and call that instead.
我选择依赖嗅探 document.all 作为对 IE 的检查，因为它保持紧凑并避免需要单独的功能。如果这对您不起作用，请在 IE 条件注释中定义一个函数并调用它。
One small bug, if you select the same element it won't shrink again until you move the focus to another element, I'm calling it a feature ;-)
一个小错误，如果你选择同一个元素，它不会再次缩小，直到你将焦点移到另一个元素上，我称之为功能;-)
回答by Stud Muffler
回答by keong
for (i=1;i<=5;i++){
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
}
I used this way to showed the drop down list when the width is not showed correctly.
当宽度显示不正确时，我使用这种方式显示下拉列表。
It work for IE6, Firefox and Chrome.
它适用于 IE6、Firefox 和 Chrome。
