使用 jquery“html”动态加载表格时，IE8 表格底部会加载网格标题答案

【问题标题】：Grid caption loads on bottom of table in IE8 when using jquery "html" to dynamically load table使用 jquery“html”动态加载表格时，IE8 表格底部会加载网格标题
【发布时间】：2010-11-30 13:25:31
【问题描述】：

我有一个表格，当点击按钮时，我会在网站上动态加载。

由于某种原因，在 IE8 中，当我单击按钮时，表格的 CAPTION 标记会加载到网格底部。

问题是由于这行css造成的：

vertical-align:bottom;

如果我删除它，我很好。我只是好奇是否有人知道发生这种情况的具体原因。

顺便说一句，“IE 很烂”不够具体。

您可以查看下面示例的完整标记，或click here 来查看它的实际效果：

<html>
 <head>
  <title>Table Test</title>

  <style type="text/css">
   .grid caption {
   background-color:#005abb;
   color:#FFFFFF;
   padding:0 0.25em;
   vertical-align:bottom;
   }
  </style>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript"> 
   $(document).ready(function() {
     $( "#_button" ).click(function() {     
     var newTableText = '<table cellspacing="0" cellpadding="4" border="0" class="grid"><tbody><caption>Now I\'m on da bottom</caption><tr class="gridHeader"><th>Code</th><th>A</th><th>P</th><th>R</th><th>RM</th><th>Totals</th><th>Percentages</th></tr><tr class = "gridRow"><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>1</td><td>50%</td></tr><tr class = "gridAlternatingRow"><td>2</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0%</td></tr></tbody></table>';     
     $( "#_table" ).html(newTableText);
    return false;
   });
   });//End of document ready
  </script>
 <body>

 <button id="_button" type="button">Click Me and watch the caption move to bottom</button>
 <div id="_table" style="width: 700px;">
  <table cellspacing="0" cellpadding="4" border="0" class="grid"><tbody><caption>I'm on top</caption>
  <tr class="gridHeader"><th>Code</th><th>A</th><th>P</th><th>R</th><th>RM</th><th>Totals</th><th>Percentages</th></tr>
  <tr class = "gridRow"><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>1</td><td>50%</td></tr>
  <tr class = "gridAlternatingRow"><td>2</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0%</td></tr>
  </tbody></table>
 </div>

 </body>
</html>

【问题讨论】：

很好地发布了一个完整的例子，让这类问题很快得到回答:)

标签： jquery css internet-explorer

【解决方案1】：

简单的解决方法是指定DOCTYPE。 DOCTYPE 告诉浏览器您正在使用哪组规则。没有它，IE 将恢复为quirks mode，它本质上是 IE 5.5 渲染引擎。这会导致许多奇怪的副作用，包括您所观察到的。

我拿了你的例子并添加了以下内容，它在 IE9 中运行良好（以及 IE9 在 IE8 模式下）：

<!DOCTYPE html>

另外，需要注意的是，IE 要求DOCTYPE 不进行任何操作，否则会触发怪癖模式。空白是可以的，但没有 cmets 或其他标记。

【讨论】：