Does anybody help me to figure out what is the matter

HTML & CSS
1

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


<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.

the result looks like this

2

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.

3

thanks Paul very much!
i do just as you say and it works…
:smiley:
but i don’t know the reason and i can’t find any related info about this issue.

4

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.