Html下拉列表中的条目列表和所选条目的大小不同

Question

我面临着html下拉的一些问题。 我想保持下拉列表的大小不变，但是当用户点击下拉列表时，列表应该以更大的尺寸显示，这样条目就不会被截断。这是fiefox中的默认行为，此问题仅出现在IE浏览器。 任何人都可以建议在IE中解决这个问题吗？

我已经尝试在onclick事件中扩展下拉列表的大小。 但它会增加整个下降。（不仅是列表）。

风格= '宽度：100px的;' onclick =“this.style.width ='200px';” onblur =“this.style.width ='100px'

Answer 1

出于纯粹的好奇心，我试图解决一些问题。 这不完美。

使用em而不是px，em存在问题，但在这种情况下它比px更可靠。 Em有多大？

HTML：

<select id="sel" name="sel" style="width:100px;">
    <option>Options</option>
    <option>IIIIIIIIIIIIIII</option>
    <option>MMMMMMMMMMMMMMMMMMMMMMMMM</option>
    <option>OptionsOptionsOptionsOptionsOptionsOptions</option>
    <option>Options</option>
</select>

JQuery的：

$('#sel').change(function () {
   var len = $('#sel option:selected').val().length;
   $('#sel').attr("style", "width:"+len+"em;");
});

快速的JsFiddle

就像你会看到它不完美一样，我比M小得多，但px更依赖于字体。 至少em有一些一致性。 可能有帮助！