Applying hasLayout to the i element via zoom or in

I've had to apply hasLayout to the <i> element to avoid an IE7 bug in which sentences with italics obscured images that those sentences were on the same horizontal line as.

I've done so using either the zoom property or the display: inline-block property.

But now, any phrase in italics causes the italic portion to behave as if it were it's own block... kinda... or, it just doesn't break or wrap like a normal sentence would, in IE7 only. IE8 and FF work normally.

Example code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>
i {zoom: 1;}
p {font-size: 20px;}
div {width: 200px; border: 2px solid red;}
</style>
</head>
<body>

<div>
<p>Here is a sentence. <i>Here is an italic sentence.</i> Here is another sentence.</p>
</div>

</body>
</html>

Renders like this:

alt text http://img193.imageshack.us/img193/968/haslayoutitalics.png

How can I get normal functionality back to my <i> elements?

You could stack the <img>s above offending <i>s. The code below removes the hasLayout fix, but stacks the images above the white bars you were seeing before:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>     
<title>Test</title>

<style type="text/css">

img {
    position: relative;
    z-index: 1;
}

p {font-size: 20px; background-color:#FFF;}
div {width: 200px; border: 2px solid red;}

</style>
</head>
<body>

    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
    <p><i>This is an italic sentence.</i></p>
    <p><strong>This is a bold sentence.</strong></p>
    <p>This is a normal sentence.</p>

    <div>
        <p>Here is a sentence. <i>Here is an italic sentence.</i> Here is another sentence.</p>
    </div>

</body>
</html>