jQuery: Box Model Fix

Box Model Hack

Author: Alessandro Coscia

The problem

IE doesn't implement the correct (standard) box model, so box appears with different dimensions in different browsers.

W3C's standard explains the correct model to adopt: Box Model.
This is a good image (coming from Wikipedia) to understand the problem:


There are some solutions:
  • Hack one-half margin value for IE/win only
  • Set display: inline
  • Use jquery.fixBoxModel.js (compatible with prototype, mootools and scriptaculous!!!)

Solution: Use jquery.fixBoxModel.js

I wrote this plugin to solve this problem.
It is very simple to use: include the libraries between <head> and </head>:

and then put this code after:



Fix IE6 Double Margin bug
Fix Box model bug
Usefull plugin to solve some CSS problems.