Javascript IE中的下拉列表宽度
在IE中，下拉列表的宽度与下拉框的宽度相同（我希望这是有意义的），而在Firefox中，下拉列表的宽度根据内容的不同而不同 这基本上意味着我必须确保dropbox足够宽，以显示尽可能长的选择。这使我的页面看起来非常难看：( 这个问题有解决办法吗？Javascript IE中的下拉列表宽度,javascript,html,internet-explorer,drop-down-menu,Javascript,Html,Internet Explorer,Drop Down Menu,在IE中，下拉列表的宽度与下拉框的宽度相同（我希望这是有意义的），而在Firefox中，下拉列表的宽度根据内容的不同而不同 这基本上意味着我必须确保dropbox足够宽，以显示尽可能长的选择。这使我的页面看起来非常难看：( 这个问题有解决办法吗？ 如何使用CSS为dropbox和dropdownlist设置不同的宽度？您可以直接向select元素添加样式： 因此，此选择项的宽度为200像素 或者，您可以将一个类或id应用于元素，并在样式表中引用它。目前还没有。我不知道IE8，但它不能在IE6和
如何使用CSS为dropbox和dropdownlist设置不同的宽度？您可以直接向select元素添加样式：
或者，您可以将一个类或id应用于元素，并在样式表中引用它。目前还没有。我不知道IE8，但它不能在IE6和IE7中实现，除非您使用javascript实现自己的下拉列表功能。在web上有一些如何实现它的示例，尽管我不认为复制exi有什么好处sting功能。在IE6/IE7/IE8中没有办法做到这一点。控件是由应用程序绘制的，IE根本不是这样绘制的。如果下拉列表的宽度是一个宽度，列表的宽度是另一个宽度，那么最好通过简单的HTML/CSS/JavaScript实现自己的下拉列表。创建自己的下拉列表非常重要你可以使用一些JavaScript来使IE下拉菜单正常工作 它使用了一点YUI库和一个特殊的扩展来修复IE选择框 您需要包括以下内容，并将
<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>
//对于要影响的每个选择框，应用以下内容：
var s1=new YAHOO.Hack.fixeselectwidth（'s1'）；//s1是要影响的选择框的ID
IE对于选择控件的OnMouxOutt有一个问题（它不考虑鼠标在选择上的鼠标选择）。这使得使用鼠标器非常棘手。第一个解决方案是迄今为止我发现的最好的。 < P>我们在ASP：DROPPHOLDLIST上有相同的事情：
在Firefox（3.0.5）中，下拉列表是下拉列表中最长项目的宽度，大约600像素宽或类似的宽度。在jQuery中，这非常有效。假设下拉列表具有id=“dropdown”
@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>
选择{宽度：100px}
一个
两个-在IE中被切断的长选项
注意：$.browser.msie确实需要jquery。这里是最简单的解决方案 在开始之前，我必须告诉您，下拉选择框将在除IE6之外的几乎所有浏览器中自动展开。因此，我将执行浏览器检查（即IE6），并仅将以下内容写入该浏览器。开始。首先检查浏览器 代码将神奇地扩展下拉选择框。解决方案的唯一问题是onmouseover下拉框将扩展到420px，并且由于overflow=hidden，我们将隐藏扩展的下拉框大小，并将其显示为170px；因此，ddl右侧的箭头将被隐藏且无法看到。但选择框我们将扩展到420px；这正是我们真正想要的。只需自己尝试下面的代码，如果您喜欢，就可以使用它
.ctrDropDown
{
width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:420px; <%-- this the width of the dropdown select box.--%>
}
<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>
.ctr下拉列表
{
宽度：420px；
}
.ctrDropDownClick
{
宽度：420px；
}
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
.ctr下拉列表
{
宽度：170px；
}
.ctrDropDownClick
{
宽度：自动；
}
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'); });
}
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
wide<select class="wide">
...
</select>
...
。希望这有帮助。您可以尝试以下方法
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”在模糊中让选择框恢复正常…决定你自己的宽度。我需要35%
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
在同一篇博文中，我写道使用YUI按钮菜单创建一个与普通元素完全相同的选择元素。请看一看，并让我知道这是否有帮助！这似乎与IE6一起工作，并且似乎不会破坏其他元素。另一件好事是，它会根据需要自动更改菜单
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
$(document).ready(function () {
if (document.all) {
$('#<%=cboDisability.ClientID %>').mousedown(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboDisability.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboDisability.ClientID %>').change(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').mousedown(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboEthnicity.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').change(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
});
}
});
<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>
$(document).ready(function() {
if ($.browser.msie) $('select.wide')
.bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
.bind('blur', function() { $(this).css({position:'static',width:''}); });
});
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"
<td valign="top" style="width:225px; overflow:hidden;">
<div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
<select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
<option value="0">All</option>
<!--More Options-->
</select>
</div>
</td>
$(document).ready(function () {
var clicknum = 0;
$('.dropdown').click(
function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
$(this).css('position', '');
$(this).css('width', '');
}
}).blur(
function() {
$(this).css('position', '');
$(this).css('width', '');
clicknum = 0;
}).focus(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
}).mousedown(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
});
})(jQuery);