jquery - 按钮在 Internet Explorer 中不居中

Question

我这里有一个 jsFiddle，请在 Internet Explorer 和其他主流浏览器中打开:

http://jsfiddle.net/6bv7j/1/

现在在 jsFiddle 中，只需单击“添加问题”按钮，它就会在下面添加一行。在该行中显示了两个按钮，一个称为“选择所有答案”，另一个称为“删除所有答案”。

现在在主流浏览器中，按钮位于表格的中央，这很好。但在 Internet Explorer 中它不是居中的，它仍然是左对齐的。是否有一段代码导致它无法在 Internet Explorer 中居中，或者我是否需要添加一些内容才能使其在 Internet Explorer 中居中？

我尝试了 float:center，但这没有用。我不确定是否最好使用 align 方法。

下面是代码的 CSS 和 jQuery/HTML:

.allBtnsRow{
    text-align:center;
    cursor:pointer;
    font-size:85%;
}

.allRemoveBtnsRow{
    text-align:center;
    cursor:pointer;
    font-size:85%;
}

下面是 jQuery/HTML 代码:

$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);' />");

Answer 1

div 中不需要tr 和 td。删除 $row 和 $cell 并将 $BtnClass 附加到 $answer:

// $row = $("<tr/>").appendTo($answer);
// $cell = $("<td/>").appendTo($row);

$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($answer);