У меня есть таблица, которую я динамически загружаю на веб-сайт при нажатии кнопки.
Почему-то в IE8, когда я нажимаю кнопку, разметка CAPTION таблицы загружается в нижней части сетки.
Проблема связана с этой строкой CSS:
vertical-align:bottom;
Если я уберу его, я в порядке. Мне просто любопытно, если кто-нибудь знает конкретную причину, почему это происходит.
Кстати, "IE отстой" недостаточно конкретен.
Вы можете увидеть полную разметку примера ниже или нажмите здесь , чтобы увидеть его в действии:
<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>