Javascript 条目列表和所选条目具有不同大小的Html下拉列表

我在html下拉列表中遇到了一些问题。我想保持下拉列表的大小不变，但当用户单击下拉列表时，列表应以更大的大小显示，以便条目不会被截断。这是fiefox中的默认行为，此问题仅出现在IE中。有人能建议一些解决IE中此问题的方法吗

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

style='width:100px；'onclick=“this.style.width='200px'；”onblur=“this.style.width='100px”

---

纯粹出于好奇，我试着想出一些办法，但并不完美

使用em而不是px，em会有问题，但在这种情况下，它比px可靠得多

HTML:

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

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

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