在 IE 中，下拉列表的宽度与下拉框的宽度相同（我希望我说得通），而在 Firefox 中，下拉列表的宽度根据内容而变化。
这基本上意味着我必须确保 Dropbox 足够宽以显示可能的最长选择。这让我的页面看起来很丑:(
这个问题有什么解决方法吗？如何使用 CSS 为下拉框和下拉列表设置不同的宽度？
IE 中的下拉列表宽度
IT技术
javascript
html
internet-explorer
drop-down-menu
2021-02-09 00:01:13
6个回答
这是另一个基于jQuery的示例。与此处发布的所有其他答案相反，它考虑了所有键盘和鼠标事件，尤其是点击：
if (!$.support.leadingWhitespace) { // if IE6/7/8
$('select.wide')
.bind('focus mouseover', function() { $(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'); });
}
结合这段 CSS 使用它：
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
您需要做的就是将类添加wide到有问题的下拉元素中。
<select class="wide">
...
</select>
这是一个 jsfiddle 示例。希望这可以帮助。
创建您自己的下拉列表比它的value更痛苦。您可以使用一些 JavaScript 使 IE 下拉列表工作。
它使用了一些 YUI 库和一个特殊的扩展来修复 IE 选择框。
您将需要包含以下内容并将您的<select>元素包装在<span class="select-box">
将这些放在页面的 body 标签之前：
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>
接受后编辑：
您也可以在没有 YUI 库和 Hack 控件的情况下执行此操作。您真正需要做的就是在 select 元素上放置一个 onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" （或任何您想要的）。YUI 控件为它提供了漂亮的动画，但这不是必需的。这个任务也可以用 jquery 和其他库来完成（虽然，我还没有找到明确的文档）
-- 对编辑的修正：
IE 的选择控件的 onmouseout 有问题（它不认为鼠标悬停在选项上是选择上的鼠标悬停）。这使得使用 mouseout 非常棘手。第一个解决方案是迄今为止我发现的最好的解决方案。
你可以试试以下...
styleClass="someStyleWidth"
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}"
onblur="this.style.position='';this.style.width=''"
我试过了，它对我有用。不需要其他任何东西。
我使用了以下解决方案，它似乎在大多数情况下都能很好地工作。
<style>
select{width:100px}
</style>
<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
<option>One</option>
<option>Two - A long option that gets cut off in IE</option>
</select>
</html>
注意：$.browser.msie确实需要 jquery。
@Thad 您还需要添加一个模糊事件处理程序
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
$("#dropdown").blur(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
但是，这仍然会在单击时展开选择框，而不仅仅是元素。（它似乎在 IE6 中失败，但在 Chrome 和 IE7 中完美运行）