There are basically 3 causes of the problem: opacity, overflow, and zIndex. IE has never done opacity the same way as Firefox or other browsers; it uses
filter: alpha(opacity=50) instead of
opacity: 0.5. IE8 doesn’t seem to have any opacity support at all.
More noticable is overflow. I was using large spritemaps for the enemies, which were clipped to show a single sprite1. So the Sarge sprites are all in a single image file, and different parts of the image are shown for different individual sprites. In IE8, the images wouldn’t clip and the entire spritemap would be shown.
I made a CSS overflow test to pinpoint exactly what the problem is. I was using absolutely positioned
imgs in a relatively positioned
div. In Firefox and IE7, the children of relatively positioned elements are clipped, but not in IE8.
To fix it, I’m using a staticly positioned
div for the container, and positioning all the content (walls, sprites, and sky) relatively.
The third problem is with
z-index, for which I made a CSS z-index test. In IE7, there was no interleaving of children of siblings. So if 2 adjacent nodes, A and B, each have children with different z-indexes, there is no way for A’s children to be layered between B’s. Either all of A’s children are in front of B’s children, or they are all behind B’s children. And it all depends on A and B’s z-indexes, not their children’s. In Firefox and IE8 there can be interleaving if the z-indexes of the parents aren’t set. Also in IE8, there can be interleaving if the z-indexes of the parent are set to 0.
- I did this so that only a few images needed to be downloaded. Instead of one for every frame and angle for each enemy, there is just a single image for each enemy type [↩]