How to fix CSS problems in Internet Explorer
Internet Explorer is a major source of frustration for web developers because
of its incomplete and buggy CSS support. Luckily, there are quite simple fixes
for many of the problems.
The solutions
By adding css rules that logically should not have any effect (and will have no effect in sane web
browsers) you can make IE behave like it should. The following rules are my common tricks for doing this.
line-height: 1.25;
zoom: 1;
position: relative;
In addition, there are 2 more tricks that might help:
- Invisible bottom border for bleeding background images.
- Putting absolutely positioned elements inside relatively positioned elements at the bottom of the relatively positioned element.
Examples and explanations
The line-height trick is used when the content in a floated element does not appear before you scroll it off screen and back. Which value you specify for line-height does not matter, 1.25 is just what I think is the closest to browser default values. This is a typical error for IE6 and does not happen that often in IE7.
For things like disappearing background images and incorrectly (absolutely) positioned elements, the position: relative and zoom: 1 combo often solves the problem.
You don’t always need both of them. Try them one by one and then in combination if you don’t see any effect. Note: zoom is a proprietary property that is implemented in IE only so it will invalidate your stylesheet.
Sometimes, a vertically repeated background image bleeds out of its element. This can be stopped by adding a bottom border on the element. You can use the background color of the containting element as border color so the extra border won’t be visible. This problem might also be solved with the zoom trick.
A more complicated problem sometimes happen when you have absolutely positioned elements inside a relatively positioned element. The absolutely positioned elements will then not appear no matter which of the above mentioned tricks you apply. You must then edit your html code and place your absolutely positioned elements at the bottom of your relatively positioned element (just before the closing tag). I don’t remember having this problem on anything but absolutely positioned images but you might have other experiences.