<select>是我们常用的控件,但在IE下却存在一个令人困扰的BUG,就是在定义了<select>宽度的情况下,<option>里的内容宽度超过<select>定义宽度的话,超出的部分将被截断…影响用户的正常浏览.(而在FF,webkis内核的浏览器里会被正确的解析,如图)
如何解决:
这里用到了jQuery(最近在学这个,^_^),看看代码:
<!–[if IE]>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#demo”)
.focus(function(){
$(this).data(“selectWidth”, $(this).css(“width”)).css(“width”, “auto”);
$(this).css({ position:”absolute” });
})
.blur(function(){
$(this).css(“width”, $(this).data(“selectWidth”));
});
});
</script>
<![endif]–>
思路是当<select>获得焦点时,将<select>的宽度设为auto,失去焦点时还原.
2个值得注意的地方:
1.因为是IE的BUG,所以用了<!–[if IE]>
2.为了不破坏布局所以加了这一句:$(this).css({ position:”absolute” });
看看实际的效果: Demo
目前这还只是一个雏形,还需要优化,如果大家有什么好的建议欢迎留言 
