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:

Solutions

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>:

          <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
          <script src="js/jquery.fixBoxModel.js" type="text/javascript"></script>

and then put this code after:

  <script>
  var $j = jQuery.noConflict();
  $j('document').ready(function () {
    $j('div').fixBoxModel();
  });
  </script>

Downloads

jquery.fixBoxModel.js (4.12Kb) or jquery.fixBoxModel.min.js (2.18Kb)
jquery.js
See test file (demo)

jQuery

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