Question

我有一个下拉菜单，其中包含select和option标签的不同宽度： -

#select{
width:150px;
>option{
width:210px;
}
}

此代码在除IE7和IE之外的所有其他浏览器中都能正常运行。 IE8。在这些浏览器中，选项标签也使用宽度为150px。怎么解决这个？请帮帮....

Answer 1

我发现的一个例子只使用css和一点javascript来改变onclick的宽度。

<style>
.ctrDropDown{
    width:145px;
    font-size:11px;
}
.ctrDropDownClick{
    font-size:11px;

    width:300px;

}
.plainDropDown{
    width:145px;
    font-size:11px;
}
</style>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the problem select list:<br><br>
<select name="someDropDown" id="someDropDown" class="plainDropDown">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
<br>
<hr width="150px;" align="left">
<br>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the better select list:<br><br>
<select name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>

DEMO

还是一个JSFIDDLE：HERE

希望它有所帮助！

select和option标签Dropdown的宽度不同

1 个答案: