If any of you have ever tried to deal with CSS and browser compatibility it can be a bit of a challenge. Something that works in one browser is busted in another. Fix the one thing and it busts something else or is busted in the first. To solve the problem you often need a separate set of CSS instructions for each of the supported browsers. You could do this by creating separate CSS stylesheets for each supported browser and then use server side scripting to load the correct one. Although effective this can be an unmanageable solution for large sites with many stylesheets to keep up to date. This is where the Box Model Hack comes in.
The Box Model Hack is basically using the same style directives with some tweaks in its calling mechanism. Let me demonstrate with the following example:
height: 100% !important;
height: 200px;
height/**/:/**/ 150px;
The first directive uses the
!important modifier. This is read by all browsers and is meant to cause the browser to ignore and over rides, but IE/Win ignores the
!important and will over ride using any following directives. Since IE/Win browsers ignore the !important value in the first directive the second one over rides the first for those browsers but not for others like Firefox and Safari. The Last directive is not valid in IE/Win 5.x as is therefore ignored, IE/Win 6.x reads it correctly and again over rides. Other browsers ignore it as they support the
!important modifier in the first directive.
The result in this example is that non IE/Win browsers such as Firefox and Safari will use a height of 100%, IE/Win 5.x will use a height of 200px and IE/Win 6.x will use 150px.
Reference:
BoxModelHack
