原文連結：http://clocker321.blog.163.com/blog/static/6350577200982794537757/
公司項目需要相容IE8，在一個功能子產品中用到了select下拉框并設定了寬度為固定值，在IE8浏覽器中打開的的時候，因為option加載的内容長度>下拉框寬度，選擇下拉框内容的時候并沒有顯示完全，如下圖：
用了以上方法可完全顯示出來，如上右圖，zIndex=11;是我自己添加的，在css中是z-index:11,但是在js中就不管用了
詳細代碼（取自連結）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function FixWidth(selectObj)
{
var newSelectObj = document.createElement("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.selectedIndex = selectObj.selectedIndex;
newSelectObj.id="newSelectObj";
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
while(e = e.offsetParent)
{
absTop += e.offsetTop;
absLeft += e.offsetLeft;
}
with (newSelectObj.style)
{
position = "absolute";
top = absTop + "px";
left = absLeft + "px";
width = "auto";
zIndex=11;
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
if(window.addEventListener)
{
newSelectObj.addEventListener("blur", rollback, false);
newSelectObj.addEventListener("change", rollback, false);
}
else
{
newSelectObj.attachEvent("onblur", rollback);
newSelectObj.attachEvent("onchange", rollback);
}
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
var newDiv = document.createElement("div");
with (newDiv.style)
{
position = "absolute";
top = (absTop-10) + "px";
left = (absLeft-10) + "px";
width = newSelectObj.offsetWidth+20;
height= newSelectObj.offsetHeight+20;;
background = "transparent";
zIndex=11;
}
document.body.appendChild(newDiv);
newSelectObj.focus();
var enterSel="false";
var enter = function(){enterSel=enterSelect();};
newSelectObj.onmouseover = enter;
var leavDiv="false";
var leave = function(){leavDiv=leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel);};
newDiv.onmouseleave = leave;
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
if(document.getElementById("newSelectObj") != null){
document.body.removeChild(newSelectObj);
}
}
function removeNewDiv(newDiv)
{
document.body.removeChild(newDiv);
}
function enterSelect(){
return "true";
}
function leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel){
if(enterSel == "true" ){
RollbackWidth(selectObj, newSelectObj);
removeNewDiv(newDiv);
}
}
</script>
</head>
<body>
<form method="post">
<div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;z-index: 10;" >
<select name="Select1" style="width:80px;" οnmοuseοver="FixWidth(this)">
<option id="A" >AAAAAAAAAAAAAAA</option>
<option id="B" >BBBBBBBBBBBBBBB</option>
<option id="C" >CCCCCCCCCCCCCCC</option>
</select>
</div>
</form>
</body>
</html>
還參考了另一種方法，連結：http://blog.csdn.net/itguaicai/article/details/42581021
$(function() {
$(".ProductAttributesSelect").mouseover(function() {
$(this).data("origWidth", $(this).css("width")).css("width", "auto");
}).mouseout(function() {
$(this).css("width", $(this).data("origWidth"));
});
});
這種方式雖然簡單便捷，但是在用的時候就會發現滑鼠移出select框去選擇option時，select框恢複為原來的寬度，并不能進行選擇，沒有達到預期的目的