Display: Table-cell not setting height constantly xbrowser (ie8 table bug)_问答_开发者

Display: Table-cell not setting height constantly xbrowser (ie8 table bug)

开发者 https://www.devze.com 2023-01-22 09:43 出处：网络

I\'m setting up a page with a bunch of dynamic content. I\'m organizing this within a table. There are three rows, each with a single cell. The top part works as a fixed header, since I\'ve set the to

I'm setting up a page with a bunch of dynamic content. I'm organizing this within a table. There are three rows, each with a single cell. The top part works as a fixed header, since I've set the top cell's height. The bottom cell works as a footer, since it also has a static height. The table's total height is set to 100% and the middle row/cell is left to be filled with dynamic content and the remaining space in the table. Here is a two-rowed example to demonstrate the problem:

<html>
  <body>
    <div class="element_container", style="width: 600px; height: 500px;">
      <div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
          </div>
        </div>
        &开发者_JS百科lt;div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

In Chrome/Firefox/Safari, the total height of the table is kept at 500px. In IE8, it becomes 540px, as if the 100% height from second cell are inherited from the table itself, and not its parent row.

Is there anyway to get tables to work the same way across browsers? Or, at the very least, obtain the same sort of functionality within tables in IE8?

Not sure why you are trying to create a table without just using the table tag? This appears to work fine.

<html>
  <body>
    <table style="width:600px; height:500px; background:blue;">
      <tr>
        <td style="height:40px; background: green;">Hi</td>
      </tr>
      <tr>
        <td style="background: red;">Hello</td>
      </tr>
    </table>
  </body>
</html>

One of the biggest problems with IE is its default interpretations for cell alignment: and also it's alternative box model. Often things that are 500px tall in standards compliant browsers are taller or wider in IE.

Best option is to use conditional comments for IE style-sheets: I go as far as using one for IE 6,7,8 to force the site to look consistent across all browsers.

Try something like:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]--> 

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->

Alternately, it seems there is no reason for you to be using a table. Create divs instead for a more consistent layout.