滾動條在網上不會顯示在正確的位置Explorer中

Question

我這裏有一個的jsfiddle被嵌入（請在IE和一個其他主流瀏覽器打開）：

http://jsfiddle.net/6rCyH/51/embedded/result/

http://jsfiddle.net/6rCyH/51/（正常小提琴等等你可以看到代碼）

要使用小提琴只需點擊「添加問題」上多次，它會在下面的表中追加行：

我的問題是列在主要對準正確Safari，Opera，Chrome和Firefox的瀏覽器，但它在IE中沒有正確對齊。

每列每個單元格包含相同的寬度，但我可以看到的問題是IE中的滾動條比表格中的滾動條要多得多，而不是在其他瀏覽器中。我的問題是，將滾動條放在表格旁邊的最佳方式是什麼，以便它不會導致其他列中的對齊問題？該表應該是一個帶有固定標題的滾動表。

下面是代碼：

HTML：

<div id="details"> 
    <table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0"> 
     <thead> 
     <tr> 
      <th width="9%" class="qid">Question No</th> 
      <th width="29%" class="question">Question</th> 
      <th width="62%" class="optandans">Option and Answer</th> 
     </tr> 
     </thead> 
    </table> 
    <div id="qandatbl_onthefly_container"> 
    <table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0" width="100%"> 
     <tbody> 
     </tbody> 
    </table> 
    </div> 
    </div> 

更新CSS：

#qandatbl_onthefly_container 
{ 
    width:100%; 
    overflow:scroll; 
    max-height:600px; 
} 


#qandatbl, #qandatbl_onthefly{ 
    border:1px black solid; 
    border-collapse:collapse; 
    table-layout:fixed; 
} 
#qandatbl 
{ 
    width:100%; 
    margin-left:0; 
} 
#qandatbl_onthefly 
{ 
    width:100%; 
} 

.qid { 
    /*width:15%;*/ 
    font-weight:bold; 
    border:1px black solid; 
    border-collapse:collapse; 
} 

/*.question { 
    width:30%; 
    border:1px black solid; 
    border-collapse:collapse; 
}*/ 

.question { 
    /*min-width:14%; 
    max-width:14%;*/ 
    max-width:0.1%; 
    border:1px black solid; 
    border-collapse:collapse; 
     line-height: 0; 
} 

.noofanswers{ 
    min-width:15%; 
    max-width:15%; 
    /*padding-top:5%; 
    padding-bottom:5%;*/ 
} 

.optandans{ 
    /*min-width:30%; 
    max-width:30%;*/ 
    border:1px black solid; 
    border-collapse:collapse; 
} 

.option{ 
    min-width:100%; 
    max-width:100%; 
    /*padding-top:5%; 
    padding-bottom:5%;*/ 
} 

.answer { 
    min-width:100%; 
    max-width:100%; 
    /*padding-top:5%; 
    padding-bottom:5%;*/ 
} 

的Jquery：

function insertQuestion(form) 
{ 
//updated variables 

var $tbody = $('#qandatbl_onthefly > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>"); 
    var $td = $("<td class='extratd' width='62%'>"); 
    var $qid = $("<td class='qid' width='9%'></td>").text(qnum); 
    var $question = $("<td class='question' width='29%'></td>"); 

................. 
function code here 
................. 

setWidth(); 

} 

function setWidth() { 
    var questionCellWidth = $("#qandatbl_onthefly tbody .question").width(); 
    console.log(questionCellWidth); 
    var questionCellHeight = $("#qandatbl_onthefly tbody .question").height(); 
    $(".textAreaQuestion").css({ 
     "width": (questionCellWidth - 6) + "px", 
     "height": (questionCellHeight) + "px" 
    }); 
} 

$(document).ready(function(){ 
var flag = true; 
    if(flag == true) 
    { 
     var tbl_qanda = $("#qandatbl").width(); 
     $("#qandatbl").css({"width": (tbl_qanda - 16)+ "px"}); 
    } 
    var tbl_qanda_onthefly = $("#qandatbl_onthefly").width(); 
    if(tbl_qanda > tbl_qanda_onthefly) 
    { 
     $("#qandatbl").css({"width": (tbl_qanda_onthefly - 16)+ "px"}); 
     $("#qandatbl_onthefly_container").css({"width": (tbl_qanda_onthefly)+ "px"}); 
    } 
}); 

Answer 1

你需要做的CSS

我一些零錢。在#qandatbl中加入float:left;

ii。在#qandatbl_onthefly_container中加入clear:both

iii。在.question textarea和#qandatbl_onthefly_container添加overflow:auto

第三個與您的問題沒有關係，但沒有在textarea上的滾動看起來不好，即。

Answer 2

您必須爲ie和ie版本定義其他樣式，如下所示。這糾正了標題對齊。

#qandatbl{float:left;}