Grid caption loads on bottom of table in IE8 when using jquery "html" to dynamically load table_问答_开发者

Grid caption loads on bottom of table in IE8 when using jquery "html" to dynamically load table

开发者 https://www.devze.com 2023-01-28 15:14 出处：网络

I have a table I load dynamically on a website when a button is clicked. For some reason, in IE8, wh开发者_JAVA技巧en I click the button the table\'s CAPTION markup loads at the bottom of the grid.

I have a table I load dynamically on a website when a button is clicked.

For some reason, in IE8, wh开发者_JAVA技巧en I click the button the table's CAPTION markup loads at the bottom of the grid.

The problem is due to this line of css:

vertical-align:bottom;

If I remove it it, I'm fine. I'm just curious if anyone knows the specific reason why this happens.

BTW, "IE sucks" is not specific enough.

You can see a full markup of an example below, or click here to see it in action:

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

The simple fix is to specify a DOCTYPE. A DOCTYPE tells the browser which set of rules you're playing by. Without it, IE will revert to quirks mode, which is essentially the IE 5.5 rendering engine. This will cause many strange side effects, including what you're observing.

I took your example and added the following, and it works fine in IE9 (and IE9 in IE8 mode):

<!DOCTYPE html>

Also, it's important to note that IE requires that nothing proceeds theDOCTYPE, otherwise quirks mode will be triggered. White space is OK, but no comments or other markup.