Question

我在这里有一个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);



}

Answer 1

使<div class='answer'>成为一张桌子。

Answer 2

var $td = $("<td class='extratd'>");
var $answer = $("<div class='answer'>3. Answer:<br/></div>");

应该是

var $td = $("<td class='extratd' />3. Answer:<br/></td>");
var $answer = $("<table class='answer'><tbody></tbody></table>");

或

$cell = $("<td>3. Answer<br/></td>").appendTo($row);

Answer 3

与其他浏览器相比，Internet Explorer的DOM解析偶尔会遇到一些常见的不一致问题。我首先要提出一些建议，主要是为所有容器类添加宽度样式。不确定IE 9在普通标签上是否默认为100％宽度，或者仍然像内联块一样反应，但有时候会出现问题。

我也同意你不应该在表格中的一行内的div中有一行。你应该按照mplungjan的建议去做，并生成一个完整的表来代替div和new tr。

格式问题无效

3 个答案: