無效的格式問題

我有一個的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

無效的格式問題

回答

相關問題