如果定位父級的內容會隨着滾動條變化（也就是父級的位置在變化，子元素不斷改變position時，ie下會出現抖動，原因我覺得是因為定位時要先找父元素位置，根據父元素位置進行定位，導致延遲比較明顯，出現抖動。）
如下面的例子，div寬度100%；內容ul寬度10000px超出了div的寬度出現滾動條。當拖動div的滾動條時，對ul進行定位就會出現抖動。
解決方法在外面在套一層div，設置這一層為定位父元素。寬高定死。設置overflow：hidden；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
body,ul,li,table,td,tr,div,thead,tbody{ margin:0; padding:0;}
li{ list-style:none;}
.table_div{width:100%; height:300px; overflow:auto; margin:5px; background:#ccc; position:relative; background:red;}
#left_tit{ width:10000px; position:absolute; left:0;top:0;}
#left_tit li{ width:130px; height:30px;border:1px solid #000;}
#fixed_li{ background:red; position:absolute; left:0; top:0;}
#tbody{ padding-top:30px;}
</style>
</head>
<body>
<div class="table_div" id="table_div">
<ul class="left_tit" id="left_tit">
<li id="fixed_li"></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
<script>
var width_l=130;
var height_l=15;
var left_tit_height=248;
function set_table(width_l,height_l,left_tit_height){
var left_tit=document.getElementById("left_tit");
var table_div=document.getElementById("table_div");
table_div.onscroll=function(){
var scrollTop = table_div.scrollTop;
var scrollLeft = table_div.scrollLeft;
console.log(scrollTop+" "+scrollLeft)
left_tit.style.left=scrollLeft+"px";
}
}
set_table(width_l,height_l,left_tit_height);
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
body,ul,li,table,td,tr,div,thead,tbody{ margin:0; padding:0;}
li{ list-style:none;}
.table_div{width:100%; height:300px; overflow:auto; margin:5px; background:#ccc; position:relative; background:red;}
#left_tit{ width:10000px; position:absolute; left:0;top:0;}
#left_tit li{ width:130px; height:30px;border:1px solid #000;}
#fixed_li{ background:red; position:absolute; left:0; top:0;}
#tbody{ padding-top:30px;}
</style>
</head>
<body>
<div class="table_div" id="table_div">
<ul class="left_tit" id="left_tit">
<li id="fixed_li"></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
<script>
var width_l=130;
var height_l=15;
var left_tit_height=248;
function set_table(width_l,height_l,left_tit_height){
var left_tit=document.getElementById("left_tit");
var table_div=document.getElementById("table_div");
table_div.onscroll=function(){
var scrollTop = table_div.scrollTop;
var scrollLeft = table_div.scrollLeft;
console.log(scrollTop+" "+scrollLeft)
left_tit.style.left=scrollLeft+"px";
}
}
set_table(width_l,height_l,left_tit_height);
</script>
</body>
</html>