The problem caused by different browsers way of interpreting a CSS element has emerge the need of CSS hack. The box model hack was developed by Tantek Celik, the lead developer of Internet Explorer for the Mac to solve the issue on IE 5 border and padding problem. The total width of the box SHOULD be calculated by adding the border thickness on the left and right, the padding on the left and right and the width of the content. Thus, Consider the following code:
<code>#test{
background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
width: 100px;
}
</code>
The above code should create a box with a 5-pixel border and 15 pixels of padding around the content which has a 100 pixel width. This gave a total width of 140 pixels.
Unfortunately, some common browsers ( IE 6 and below) interpret this code incorrectly, Instead of applying the width to the content area, the width restrains the overall box size, so that the border and padding subtracted from the over width! So we are left with a box 100pixels width, but a content area only 60 pixel wide!!( width - left and right border+padding = 60 pixel)
This cause cross browser issues when displaying the same box on for example, IE and Firefox! Firefox will display a box of total width 140 pixel while IE will only display the same box with a total width of 100 pixel! To fix this, we need to use a hack, that is, we have to intentionally introduce code that doesn't work in one browser so that both boxes have the same width.(writting a code that work in IE but fail in firefox so that both of them have 140 pixel)
We will be taking advantage of a bug in IE that causes it to ignore certain CSS so that it set the true width:
<code>#test{
background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
<span style="color: #ff0000;">voice-family: "\"}"\";
voice-family: inherit;</span>
width: 100px;
}
</code>
But this will caused problems in Opera unless we add a definition after the above code
<code>html>body #test{
width: 100px;
}</code>
This allows browsers that understand the parent/child selector grouping to correctly interpret your code. Nowadays, with IE 7 came along, this problem will not be shown on the newer browser but for older browser on old pc this is still a problem. Other than the box model problem, presently there are still problems exist on today browsers due to different implementation and interpretation by these browsers. The need of CSS hack is still needed so that cross browser issues caused by CSS can be eliminated.