无效的格式问题

我有一个的jsfiddle在这里，请在Internet Explorer和一个其他主要浏览器中打开：无效的格式问题

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

现在，只需点击“添加问题”按钮，它会在下面追加一行。在该行中，它显示2行字母按钮（每行包含7个字母按钮）和两个按钮，一个称为“Select All Answers”，另一个称为“Remove All Answers”。

现在，在主要的浏览器中，按钮都集中在表格中，这很好。但在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); 



}

来源

2012-12-27 user1914374

为什么你追加一个TR到DIV？你甚至不需要div $ row = $（“”）.appendTo（$ answer）;' – mplungjan

这是一个课程的任务吗？相同的用户界面不断显示不同的代码方法 – charlietfl

@mplungjan这是因为在该附加行中，它将包含多个功能，'.options'，'.noanswer'和'.answers'。这个只是在附加行中显示'.answers'。但是我希望它在行的顶部显示'.options'，然后在下面显示'.noanswers'，然后在下面的'.answer'部分显示。 – user1914374

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

来源

2012-12-27 07:31:48 mplungjan

正如我想'3。在答案变量$ answer中，应该是'var $ answer = $（“

3.回答：

”）;'？ – user1914374

只要你不使用div，那么你可以把答案文字放在任何你想要的地方。然而，我建议你改为'$ cell = $（“3.回答
”）.appendTo（$ row）;' – mplungjan

我可能在其他浏览器中遇到问题。让我来测试一下，看看会发生什么。也许一些CSS需要修改 – user1914374

使<div class='answer'>表。

来源

2012-12-27 07:31:38

如果div标签只是改变为表标签或它需要有点像mplugjan答案？ – user1914374

只是改为表应该没事的。你需要在桌子上应用文本对齐：中心的样式 –

如果你想要一个没有桌子的例子让我知道，我通常会一起避免使用表格。 –

听起来像是你碰到偶尔有Internet Explorer的DOM解析相比于其他浏览器的几个通用的不一致。我会首先推荐几件事情，主要是为所有容器类添加宽度样式。不确定IE 9的默认宽度是普通标签的100％还是像内联块一样反应，但有时候这是一个问题。

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

来源

2012-12-27 08:04:22

无效的格式问题

回答

相关问题