Fixing IE: CSS fixed position
I will start a series of articles about how you can fix some IE bugs. We all agree that IE is very buggy, but instead of whining, let’s see what we can do about it. So I will present you the problem, the fix, explain the fix and how you can EASILY INTEGRATE it.
Before, I will explain you a few things that I will use in these fixes. There are few different things in IE when it comes to CSS.
If you prefix a CSS property with _, IE will still recognize it. If you think this can be very useful. You can specify values for CSS properties only for IE. Let’s take an example.
The font color will be green in all the browsers, except IE, where it will be red.
Instead of _, you can also use *, + and some other special signs.
The CSS value supports in IE a special value: expression([expr]). The
_height: expression((1 + 1) + 'px');
The CSS height in the above example is actually 2 pixels in IE. In the expression we can even use
this to refer to the element for which the CSS value is applied.
Now let’s get back to the current issue. If you specify the
fixed value for the
position property, the element should be absolutely positioned, but relatively to the viewport, instead of the document. For more detailed info, please see the CSS specification. Not surprisingly, this works in most of the browsers, except IE.
And now, the fix. Which is actually very simple. We will use absolute positioning but we will calculate the coordinates dynamically relative to the viewport.
So the CSS code
will have the following IE equivalent
: document.body.scrollTop ) + 10) + 'px' );
: document.body.scrollLeft ) + 20) + 'px' );
Don’t remove the
ignoreMe variable as this will force the expression to be evaluated not only the first time the page is loaded, but always.
In the end, a live example. And if you complain that in Mozilla the things are smoother, then simply switch to Mozilla🙂.