表在每个浏览器栏IE中正确对齐

Question

希望这是我最后一个CSS问题。

我有一个滚动表，其中标题使用abosolute定位，因此当<td>行定位为相关时，滚动表时不会向下滚动。现在我遇到的问题是我的表格标题和表格行在每个浏览器（Opera，Firefox，Chrome，Safari）上都完美地排列在一起列到列，但它并不完全在Internet Explorer中。表格标题末尾约有8-12个像素。看起来当你沿着表格标题走时，每个标题都会丢失一个像素。

为什么会这样？

html table：

    <h1>PREPARE QUESTIONS AND ANSWERS</h1>
    <br/>
    <div id="tableWrapper">
    <div id="tableScroll">
    <table id="qandatbl" align="center">
    <thead>
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    <th class="col2">Weight(%)</th>
    <th class="col1">Answer</th>
    <th class="col3">Video</th>
    <th class="col4">Audio</th>
    <th class="col3">Image</th>
    </tr>
    </thead>
    <tbody>


    <tr>
    <td class="qid"><?php echo $i; ?></td>
    <td class="options"></td>
    <td class="duration"></td>
    <td class="weight"></td>
    <td class="answer"></td>
    <td class="video"></td>
    <td class="audio"></td>
    <td class="image"></td>
    </tr>
    </tbody>

</table>
</div>
</div>

的CSS：

#qandatbl{
 font-size:14px;
 border-collapse:collapse;
 margin:0px;
 text-align:center;
 margin-left:auto; 
 margin-right:auto;
            }

.col1{

                background-color:#FCF6CF; 
            max-width:125px;
            min-width:125px;    
            border: 1px solid black;
            }
            .col2{
            background-color:#FEFEF2;
            max-width:125px;
            min-width:125px;;  
            border: 1px solid black;    
            }   
            .col3{
            background-color:#FEFEF2; 
            max-width:350px;
            min-width:350px;    
            border: 1px solid black;
            }
            .col4{
            background-color:#FCF6CF;
            max-width:350px;
            min-width:350px;    
            border: 1px solid black;
            }
                .options{
            overflow:hidden;
            max-width:125px;       
            min-width:125px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
            .duration{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .weight{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
             .answer{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .qid{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .video{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
            .audio{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FEFEF2;
            border: 1px solid black;
                }
            .image{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border: 1px solid black;
                }
             #tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}

#tableWrapper thead tr {
position:absolute;
top:-24px;
}