Im having this problem only with IE8 it even works well on IE6!!…
Im appending 2 divs dynamically to the body and absolute positioning them so they get one above the other so it looks like one div… this works ok, untill i make then transparent with
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
I made the simplest demo to show the problem: http://anferth.com/tests/divs-problem/
In the demo first appear the two divs without opacity, they look like one, but 1sec after it sets the opacity to 0.5 and the divs get separated by 1px (only in IE8).
The code here: http://jsfiddle.net/messutiEdd/MNPrq/
Thanks in advance
If you have an off-by-one-pixel bug in IE8 that other people can’t reproduce, chances are good that you have the page zoomed to something other than the default level. IE doesn’t seem to be great at scaling the page in some cases, and so zooming will sometimes cause problems with object positioning and image scaling.
Try resetting your zoom level and see if the problem disappears. I’d guess that (a) there’s not a lot you can do about this, and (b) that people who habitually use zoom in IE8 are used to these little issues and probably won’t shout about it…