当使用jquery“html”动态加载表格时，网格标题加载到IE8表格的底部

我有一个表格，当点击一个按钮时，我在网站上动态加载。当使用jquery“html”动态加载表格时，网格标题加载到IE8表格的底部

出于某种原因，在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>

来源

2010-11-30 ray

发表一个完整的例子很好，使这种问题真的很快回答:) – wsanville 2010-11-30 05:26:17

简单的解决方法是指定一个DOCTYPE。 A DOCTYPE告诉浏览器您正在播放哪组规则。没有它，IE将恢复到quirks mode，这实际上是IE 5.5渲染引擎。这会造成许多奇怪的副作用，包括你观察的内容。

我把你的榜样，并添加以下内容，它（在IE8模式和IE9）工作正常IE9：

<!DOCTYPE html>

另外，需要注意的是IE浏览器需要什么进行了DOCTYPE是很重要的，否则怪癖模式将被触发。空白是好的，但没有评论或其他标记。

来源

2010-11-30 05:25:31 wsanville

当使用jquery“html”动态加载表格时，网格标题加载到IE8表格的底部

回答

相关问题