IE8 vertical margin bug

I'm having a small issue with just IE8 in standards mode. The issue is with the vertical margin between the first 2 in a vertical list of blocks elements being 1 pixel too little .

This is a subtle bug and most noticable with a 1 pixel margin when it collapses completely but I can't think of an easy fix. It doesn't seem to be a margin collapse issue like others mentioned and I can't find a fix through setting the margin on the outer div.

Anyone else noticed this and got an easy fix?

Here's the demonstrating html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
    <head>
        <title>IE 8 Bug</title>
        <style type="text/css">
            .inner { margin: 1px ; border: 1px solid black; height: 20px }
        </style>
    </head>
    <body id="newTabPage">
        <div class="outer">
          <div class="inner">
           DIV 1
          </div>
          <div class="inner">
           DIV 2
          </div>
          <div class="inner">
           DIV 3
          </div>
          <div class="inner">
           DIV 4
          </div>
        </div>
    </body>
</html>

ansaurus

tags:

views:

answers:

IE8 vertical margin bug

related questions