我这里有一个 jsFiddle，请在 Internet Explorer 和其他主要浏览器中打开：
现在在 jsFiddle 中，只需单击“添加问题”按钮，它就会在下面添加一行。在该行中，它显示 2 行字母按钮（每行包含 7 个字母按钮）和两个按钮，一个称为“选择所有答案”，另一个称为“删除所有答案”。
现在在主要浏览器中，按钮在表格中居中，这很好。但是在 Internet Explorer 中它不是居中的，它仍然是向左对齐的。现在我相信它这样做的原因是因为附加行时 HTML 的格式化方式：这似乎是这样的：
<tr><td><div><tr><td></td></tr></div></td></tr>
我的问题是，如何更改 HTML 的格式以使其有效，但也能够在 Internet Explorer 的附加行中将所有内容居中？
下面是代码的 CSS 和 jQuery/HTML：
.answer {
min-width:100%;
max-width:100%;
padding-top:5%;
padding-bottom:5%;
}
.answerBtnsRow{
background-color: #ffffff;
border: #666666 1px solid;
color: black;
font-weight:bold;
display:none;
cursor:pointer;
font-size:85%;
}
.allBtnsRow{
text-align:center;
cursor:pointer;
font-size:85%;
}
.allRemoveBtnsRow{
text-align:center;
cursor:pointer;
font-size:85%;
}
下面是 Jquery/HTML 代码：
function insertQuestion(form) {
var context = $('#optionAndAnswer');
var currenttotal = context.find('.answerBtnsOn').length;
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td class='extratd'>");
var $answer = $("<div class='answer'>3. Answer:<br/></div>");
var $questionType = '';
gQuestionIndex++;
var $this, i = 0,
$row, $cell;
$('#optionAndAnswer .answers').each(function() {
$this = $(this);
if (i % 7 == 0) {
$row = $("<tr/>").appendTo($answer);
$cell = $("<td/>").appendTo($row);
}
var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row');
$newBtn.appendTo($cell);
i++;
}); var $this = $(this);
var $BtnsClass = '';
$row = $("<tr/>").appendTo($answer);
$cell = $("<td/>").appendTo($row);
if ($questionType == 'True or False' || $questionType == 'Yes or No') {
$BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' style='display: none;' value='Select All Answers' onClick='selectAll(this);' /><input class='allRemoveBtnsRow btnsRemove' type='button' style='display: none;' value='Remove All Answers' onClick='removeAll(this);' />");
} else {
$BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='Remove All Answers' onClick='removeAll(this);' />");
}
$BtnsClass.appendTo($cell);
$tr.append($td);
$td.append($answer);
$tbody.append($tr);
count++;
$('#optionAndAnswer .answerBtns').hide();
updateAnswer($answer, gQuestionIndex);
}