Background Color and Italics sets off Internet Exp

2019-08-28 08:10发布

站内文章 / HTML/CSS
43 0 0

问题:

The following code demonstrates the issue I'm encountering:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>

p
{
    background-color:#FFF;
}


</style>
</head>
<body>

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

</body>
</html>

When this code is viewed in IE7, the Google logo will be displayed to the left with 'white horizontal bars' running through it lined up with each paragraph, displayed on the right.

Removing the first line with the <em> tags causes the lines to disappear. Try it yourself. Remove each of the three lines and see how the bug changes.

What in the world is going on with this?

--

Resolution: hasLayout issue. Adding zoom: 1 attribute to em corrects the issue.

回答1:

Not sure why it's happening, but there are many ways of making sure it doesn't, including adding display: inline-block to the em.



回答2:

This is happening because of the floated image.

When an image is floated it technically does not have any layout of its own. The white bars are the <p> tags, since in CSS you gave them a background of #FFF.

For IE7 is thinks the <p> tags are actually starting at the start of the page on the far left, so it starts them there, but simply bumps the content past the floated image, leaving funny white bars overtop of the floated image.

I would try getting around it by giving your <p> tags left margin. If you make enough left margin to get past the image you shouldn't get those bars anymore.

So try something like...

p{ background-color: #fff; margin-left: 300px; }

You can adjust the left margin but something along those lines should get rid of the white bars for you.



标签： css internet-explorer-7 background-color italics
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~