IE中的下拉列表宽度
在IE中，下拉列表的宽度与下拉框的宽度相同(我希望我有道理)，而在Firefox中，下拉列表的宽度根据内容而有所不同。
这基本上意味着我必须确保该保管箱足够宽，以显示可能的最长选择。这使我的页面看起来非常难看:(
有没有解决此问题的方法？
如何使用CSS为Dropbox和dropdownlist设置不同的宽度？
解决方案
回答
我们可以将样式直接添加到select元素：
<select name =" foo" style =" width：200px">
因此，此选择项将为200像素宽。
或者，我们可以将class或者id应用于元素并在样式表中引用它
回答
到目前为止，还没有一个。不了解IE8，但除非我们使用javascript实现自己的下拉列表功能，否则无法在IE6和IE7中完成。虽然在复制现有功能方面没有多大好处，但是有一些示例可以在网上进行操作。
回答
在IE6 / IE7 / IE8中无法做到这一点。控件是由应用程序绘制的，而IE根本不会那样绘制。最好的选择是通过简单的HTML / CSS / JavaScript实现自己的下拉菜单，如果下拉菜单中的一个宽度很重要，而列表中的另一个宽度则很重要。
回答
创建自己的下拉列表比它的价值更大。我们可以使用一些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非常棘手。第一个解决方案是到目前为止找到的最好的解决方案。
回答
我们在asp：dropdownlist上有同样的事情：
在Firefox(3.0.5)中，下拉列表是下拉列表中最长项目的宽度，例如600像素宽或者类似的宽度。
回答
在jQuery中，这个效果很好。假设下拉菜单具有id =" dropdown"。
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
回答
@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中完美运行)
回答
我使用了以下解决方案，它似乎在大多数情况下都能正常工作。
<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。
回答
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
回答
http://developer.yahoo.com/yui/examples/button/button-menu-select.html#
回答
如果我们想要一个没有过渡效果的简单下拉菜单和/或者弹出菜单，只需使用CSS ...即可强制IE6使用.htc文件(css3hover？)对所有元素都支持：hover，并且行为定义为有条件添加的CSS文件。
回答
这是另一个基于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示例。希望这可以帮助。
回答
我们可以尝试以下操作...
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=''"
我尝试了，对我有用。不需要任何其他内容。
回答
检查一下..它不是完美的，但是它可以工作，并且仅用于IE，不会影响FF。我使用onmousedown的常规javascript建立仅IE修复..但jquery中的msie也可以在onmousedown中使用。.主要思想是" onchange"和on blur使选择框恢复正常。决定我们自己的宽度。我需要35％。
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
回答
最好的答案中的hedgerwow链接(YUI动画变通方法)已损坏，我猜该域已过期。我在代码过期之前复制了代码，因此我们可以在此处找到(代码所有者可以通过再次上传将其告知我是否侵犯了版权)
http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/
在同一篇博客文章中，我写了一篇关于使用YUI Button菜单制作与普通元素完全相同的SELECT元素的文章。看看，让我知道是否有帮助！
回答
这似乎适用于IE6，但似乎不会破坏其他功能。另一个好处是，只要我们更改下拉菜单，它就会自动更改菜单。
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
回答
BalusC的上述答案很好用，但是如果下拉列表的宽度小于CSS select.expand中定义的宽度，请添加一个小修正，将其添加到mouseover绑定中：
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
回答
如果我们使用jQuery，请尝试使用此IE选择宽度插件：
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
应用此插件可使Internet Explorer中的选择框像在Firefox，Opera等中一样工作，方法是允许选项元素以全角打开，而不会失去固定宽度的外观和样式。它还在Internet Explorer 6和7的选择框中添加了对填充和边框的支持。
