jquery - 无效格式问题

Question

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

http://jsfiddle.net/7sARw/47/

现在在 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);



}

Answer 1

制作<div class='answer'>一张 table 。