Uno dei principali problemi di compatibilità tra browser è l’interpretazione del cosiddetto box model.
Secondo gli standard dell W3C, la larghezza (width) o l’altezza (height) assegnata ad un box si riferisce solo all’area di contenuto del box. Il padding, i bordi ed i margini vengono sommati in un secondo momento per arrivare alla larghezza totale del box.
Il problema è che Internet Explorer — tanto per cambiare — non segue gli standard e, nelle versioni precedenti alla 6, usa un box model differente che presenta un bug. In questo modello, il padding e i bordi vengono considerati come parte di ogni “width” o “height” assegnata.
In assenza di bordi e padding, i due modelli concordano, tuttavia, se un box ha una larghezza assegnata e gli vengono aggiunti bordi e padding, il box model standard fa si che la larghezza complessiva del box aumenti, mentre nel modello di Internet Explorer l’area di contenuto comprende tutte le misure.
Questo comporta non pochi problemi nella creazione di layout crossbrowser.
Le soluzioni a questo problema sono molteplici:
Tuttavia, quello che voglio presentarvi oggi è un metodo del tutto non intrusivo ed automatico: uno script in jQuery che risolve da solo tutti i problemi. Si tratta di jquery.fixBoxModel.js, scritto da Alessandro Coscia.
Installarlo è semplicissimo: scaricate e uploadate sul vostro server i seguenti file:
- jquery.fixBoxModel.js (4.12Kb) o jquery.fixBoxModel.min.js (2.18Kb)
- jquery.js
Inserite quindi questo codice tra i tag <head> della vostra pagina:
<script src="js/jquery.fixBoxModel.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j('document').ready(function () {
$j('div').fixBoxModel();
});
</script>
Fatto ciò, non dovrete più preoccuparvi di alcun problema di compatibilità del box model.
Comodo, no?
/script>
var $j = jQuery.noConflict();
$j(‘document’).ready(function(){
$j(“#generale”).ScrollNews({
inizialize : ‘true’,
size : ’130px’,
timeout : 2500,
speed : ‘fast’,
direction : ‘down’,
onmouseover : ‘stop’
});
});
/* */
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
nonostante cambio la variante $ gli scirpt non coesistono..helpppppppppppppp