I think this is worth mentioning: I spent the better part of today trying to fix a layout bug in Internet Explorer 7, where a negative margin was applied to a floated image container. The image was cut off at the edge of the containing element.
This is actually a well known-bug - in theory - and a reliable fix is to add a “position: relative” CSS rule to the floated container. But it didn’t work.
After a lot of research and tearing out of hair, followed by careful debugging (aka “wildly flailing about”), I discovered the reason. The containing element had a Internet Explorer proprietary filter applied to it, to give a semi-transparent fill:
/* For IE 8*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#59000000, endColorstr=#59000000)”;
On removing this, everything worked perfectly. So I just used a semi-transparent PNG as a fill image instead. Probably more efficient anyway.