Outdated methods for hacking CSS documents

Historically, web designers have resorted to exploiting parsing bugs in order to get around
Internet Explorer problems. Perhaps the most famous of these is Tantek Çelik’s box model
hack, designed to get around Internet Explorer 5.x’s inability to correctly deal with the box
model: it places padding and borders within the defined content dimensions of a box,
rather than on the outside. In other words, a box with a width setting of 300px and
padding of 20px should take up a total width of 340 pixels in a compliant browser, but in
IE 5.x, it only takes up 300 pixels. Also, only 260 pixels are available for content, due to the
40-pixel padding being placed inside the defined width of the box.
Tantek’s hack works by exploiting a CSS-parsing bug. In the following code block, padding
is set in the rule, along with a width for Internet Explorer 5.x, which terminates the rule in
the voice-family lines. Compliant browsers continue reading, thereby using the second
width value to override the first. The net result is that all browsers show the box at the
correct width.
.box {
padding: 20px;
width: 340px;
voice-family: "\"}\"";
voice-family: inherit;
width: 300px;
}
A further rule is added by some designers to cater for Opera’s then-inability to read past
the voice-family lines—the “be nice to Opera” hack took advantage of Internet Explorer
5.x not understanding child selectors, and therefore used one to set the correct width in
that browser:
html>body .box {
width: 300px;
}
The box model hack itself was later simplified further, to the simplified box model hack (or
SBMH), which involved using a single backslash in the second pair to get Internet Explorer
5.x to terminate the rule:
.box {
padding: 20px;
width: 340px;
w\idth: 300px;
}
In a sense the opposite of the box model hack, the star HTML hack is also often seen, in
order to make only Internet Explorer see a rule:
* html .box {
background: #000000;
}
There are myriad other CSS hacks out there, but they won’t be explored here. Not only do
hacks mess up your otherwise clean and compliant style sheet, but they’re also not futureproof,
as evidenced when the star HTML hack stopped working upon the release of
Internet Explorer 7. Also, hacks often need overrides, as evidenced by the “be nice to
Opera” hack. A far better and more future-proof method is to ditch CSS hacks entirely,
instead making a totally clean style sheet for a website, and using conditional comments to
fix bugs in Internet Explorer