Does anybody help me to figure out what is the matter.

**lambokini** · Feb 23, 2011 00:18

Hello everyone
I create a test page with only a div.

Code:

<body>

<div class="aa">

</div>
</body>

the css style for this page is below:
*
{
	margin: 0px 0px;
	border: 0px 0px;
	padding: 0px 0px;
}


.aa
{
width: 400px;
height: 200px;
background:url(./images/blue_skin.png) repeat-x 0px -294px; /* only part of the image will be the background */
}

the background image is in the attachment.

i am confused that when I zoom the page size to 125% on IE8, the background has an extra line that is the first row of the image appearing under the background.

does anybody tell me why?

thanks very much.
blue_skin.png

the result looks like this
result.png

**Paul O'B** · Feb 23, 2011 03:51

Hi, it looks to be another bug with IEs zoom and when you zoom it gets confused and seems to round an extra pixel into the mix which it repeats from the top of the image.

The solution would be to have a 1 or 2px transparent gap at the top of the sprite so that when it wraps the extra pixel doesn't show.

**lambokini** · Feb 23, 2011 04:21

thanks Paul very much!
i do just as you say and it works..

but i don't know the reason and i can't find any related info about this issue.

**Paul O'B** · Feb 23, 2011 04:40

Originally Posted by lambokini

thanks Paul very much!

but i don't know the reason and i can't find any related info about this issue.

It's just another undocumented bug although we have run into versions of it on the forum before. Ie is very buggy with zoom (as are a lot of browsers) and there are always rounding issues.

User Tag List

Thread: Does anybody help me to figure out what is the matter.

Thread Tools

Display

Does anybody help me to figure out what is the matter.

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions