5 Things to Know about CSS Hacks for Internet Explorer
CSS hacks remain to be essential to make our websites look great across various browsers and especially for Internet Explorer. The good thing is that there are only few of them that really matter. So, to create a list of the most necessary CSS hacks is quite possible.
1. Conditional Comments
Conditional comments help to fix a lot of problems with IE and they are not supported by any other browser. That’s why they are safe to use. Here is the usual type:
<blockquote><!–[if IE]>
do something
<![endif]–></blockquote>
Working on a layout you can place all hacks for some selector just after default rule. Thus, you can change everything quickly without searching for the corresponding hack in other places.
After finishing layout you can go through all of the CSS files again, in order to optimize everything and remove all hacks into separate file. Thus, the main CSS is neat.
This separate file can be called in the header section of a file within conditional comments:
<blockquote><!–[if IE]>
do something
<![endif]–></blockquote>
The main CSS file has the hacked selectors starting with the * html. All browsers ignore this selector, because there are no elements above html in a document tree while IE allows us to use this flaw when applying IE specific hacks.
The following information should be taking into consideration as if we are dealing with separate file with IE hacks only.
2. IE 5.x broken box model
Broken layouts in IE5.x can appear because of a combination of width and padding on the same element. To fix this problem we should use backslash box model hack:
someselector {
padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;
}
Thus, we have an element that is 200px wide, 200px high and with 10px paddings in both IE 5.x and IE 6.
3. Everything floated?
The other important rule to follow is to use extra rule display: inline; for everything floated and with a margin larger than zero.
4. Prevent overflow problems
The simple solution to prevent enlarging parent element horizontally that is caused by usage of italic font style in any IE version is the following:
someselector {
overflow-x: hidden;
}
5. Font size in tables
IE 5.x ignore font rules in tables in html or body element. Here is the simple solution of this problem:
body {
font-size: 62.5%;
}
table {
font-size: 1em;
}
You also are free to change rules according to a particular table’s needs.
CSS hacks are necessary evil that helps us to do our best with default CSS rules. The other thing is to make it easily accessible in our memory… or just invent them.