ansaurus

Question

Answer 1

+2 A:

I'm using the X-UA-Compatible meta tag for IE8 beta 1 support:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>w00t i haz ie8 beta 1</title>
</head>

It's lame, but it works. I'd used a separate IE8 CSS file, but we had problems with overflow in relatively positioned div's and testers using (unreleased) IE8 beta 2 builds said the site was unusable, so we had to fall back to using the IE7 rendering. I'd recommend doing that until IE8 beta 2 is out.

Jon Galloway 2008-08-11 19:43:36

Answer 2

+1 A:

I saw this logged as a fixed bug in RC1. But I've found a variation that seems to cause a hard assert render failure. Involves these two styles in a nested table.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
    .calendarBody
 {
     overflow: scroll;
     max-height: 500px;
 }
 </style>
</head>
<body>
    <table>
    <tbody>
        <tr>
     <td>
         This is a cell in the outer table.
  <div class="calendarBody">
      <table>
          <tbody>
       <tr>
           <td>
        This is a cell in the inner table.
    </td>
              </tr>
   </tbody>
             </table>
  </div>
     </td>
 </tr>
    </tbody>
</table>
</body>
</html>

James Koch 2009-03-20 22:15:05

I am also experiencing this same behavior.

James McMahon 2010-06-24 19:39:53

Answer 3

+15 A:

This is a really nasty bug as it affects us heavily on Stack Overflow with <pre> code blocks, which have max-height:600 and width:auto.

It is logged as a bug in the final version of IE8 with no fix.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

There is a really, really hacky CSS workaround:

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

/*
SUPER nasty IE8 hack to deal with this bug
*/
pre 
{
    max-height: none\9 
}

and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.

Jeff Atwood 2009-05-19 08:34:12

+1 but I wish I could +10 this ...

Sam Saffron 2009-11-24 23:18:17

I'm getting a 404 on the Microsoft link.

Craig Walker 2010-04-26 19:53:42

Answer 4

A:

To reproduce:

(This crashes the whole page.)

<HTML><HEAD><META content="IE=8" http-equiv="X-UA-Compatible"/></HEAD><BODY>
look:
<TABLE width="100%"><TR><TD><TABLE width="100%"><TR><TD><DIV style="overflow-y: scroll; max-height: 100px;">X</DIV></TD></TR></TABLE></TD></TR></TABLE>
</BODY></HTML>

(Whereas this works fine...)

<HTML><HEAD><META content="IE=8" http-equiv="X-UA-Compatible"/></HEAD><BODY>
look:
<TABLE width="100%"><TR><TD><TABLE width="100%"><TR><TD><DIV style="overflow-y: scroll; max-height: 100px;">The quick brown fox</DIV></TD></TR></TABLE></TD></TR></TABLE>
</BODY></HTML>

(And, madly, so does this. [No content in the div at all.])

<HTML><HEAD><META content="IE=8" http-equiv="X-UA-Compatible"/></HEAD><BODY>
look:
<TABLE width="100%"><TR><TD><TABLE width="100%"><TR><TD><DIV style="overflow-y: scroll; max-height: 100px;"></DIV></TD></TR></TABLE></TD></TR></TABLE>
</BODY></HTML>

ANeves 2010-10-05 10:27:17

ansaurus

tags:

views:

answers:

IE8 overflow:auto with max-height

To reproduce:

related questions