Nim*_*van 92 html javascript internet-explorer drop-down-menu
在IE中,下拉列表与dropbox的宽度相同(我希望我有意义),而在Firefox中,下拉列表的宽度根据内容而有所不同.
这基本上意味着我必须确保Dropbox足够宽以显示尽可能长的选择.这使我的页面看起来很难看:(
这个问题有解决方法吗？如何使用CSS为dropbox和下拉列表设置不同的宽度？
Bal*_*usC 102
这是另一个基于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的例子.希望这可以帮助.
Sle*_*nja 14
创建自己的下拉列表更令人痛苦.您可以使用一些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控件的情况下执行此操作.你真正需要做的是选择元素上放一个的onmouseover ="this.style.width ='自动’"的onmouseout ="this.style.width ='100px的’"(或任何你想要的).YUI控件为它提供了很好的动画,但它没有必要.这个任务也可以用jquery和其他库来完成(虽然我还没有找到明确的文档)
- 对编辑的修改:
IE对选择控件的onmouseout有问题(它不考虑将鼠标悬停在选项上的鼠标悬停选项上).这使得使用mouseout非常棘手.第一个解决方案是迄今为止我发现的最好的解决方案.
Sai*_*Sai 12
你可以试试以下......
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中完美运行)
在IE6/IE7/IE8中无法做到这一点.控件是由应用程序绘制的,IE浏览器根本不会这样绘制.最好的办法是通过简单的HTML/CSS/JavaScript实现自己的下拉菜单,如果下拉一个宽度和列表另一个宽度那么重要.
小智 5
如果你使用jQuery然后尝试这个IE选择宽度插件:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
应用此插件使得Internet Explorer中的选择框看起来像在Firefox,Opera等中一样工作,允许选项元素以全宽打开而不会丢失固定宽度的外观和样式.它还在Internet Explorer 6和7中的选择框中添加了对填充和边框的支持.