IE6 1px gap on absolute elements

作者: nick 分类: css 发布时间: 2010-05-25 11:40 ė 6没有评论

I get a number of requests for help with rounded corners each week and the common problem is that ie is one pixel out on the bottom corners and on the right corners. The user then applies a hack for ie to offset the 1px gap only to find that on other elements its fine.

The actual problem is that IE6 and under (ie7 seems to be ok) has a nasty bug and it gets “bottom” and “right” positioning wrong but only when the parent has a pixel height or width that is an odd number. To demonstrate the problem I have constructed a number of elements with heights and widths ranging from 199px to 205px where a little square block is placed absolutely at the bottom and right of each. The only change in the code is the height and width of each block.

This container has a height of 199px and width of 199px

img
img

This container has a height of 200px and width of 200px

img
img

This container has a height of 201px and width of 201px

img
img

This container has a height of 202px and width of 202px

img
img

This container has a height of 203px and width of 203px

img
img

This container has a height of 204px and width of 204px

img
img

This container has a height of 205px and width of 205px

img
img

In case you are another browser at the moment here is a picture of the problem.

1px  gap image

You can see that the odd size container exhibits the 1px gap but the even sized container is fine.

What can be done?

The truth is that there is not a lot that can be done. In a fixed height container you can specify the exact top position of the element and then it will be exact e.g. top:166px. Of course you would have to change that for every example that I did above. In a fluid height container it would not be much use as the height changes as the page is resized and the elements pops in and out of position.

One way to get around this problem is not to use absolute positioning at all and to place the corner element after the main element and then drag it into position with a negative margin. As the example above uses floats then the corner element must be floated also because margins will slide under the float otherwise and appear as though they are not working. We can also float the top right corner into position as well.

Here is the above demo using the method I outlined above.

img

This container has a height of 199px

img
img

This container has a height of 200px

img
img

This container has a height of 201px

img
img

This container has a height of 202px

img
img

This container has a height of 203px

img
img

This container has a height of 204px

img
img

This container has a height of 205px

img

As you can see the corners are now exact and there is no pixel gap at odd height sizes.

Of course if you have a single image that is for decoration like a corner then you can simply place the image in the background of the parent and the background-position of bottom gets rendered correctly by IE which is very strange.( If it can get the background position of bottom correct then why can’t it get the absolute position of bottom correct? Answers on a postcard please.)

However most times people would be applying 4 corners and would still try to absolutely place the bottom and right images. Again the answer is to use existing static elements to place the corners or to wrap extra static or floated divs around the element and use them for the backgrounds. However the point of this exercise was top show the 1px gap on absolutely positioned elements and if the image is important to content then a background solution is not the most semantic and the method I have described should work nicely.

Source Address : http://www.pmob.co.uk/temp/onepxgap.htm

本文出自 传播、沟通、分享,转载时请注明出处及相应链接。

本文永久链接: https://www.nickdd.cn/?p=581

发表评论

您的电子邮箱地址不会被公开。

Ɣ回顶部