Commenti condizionali per risolvere le diverse interpretazioni del box model tra Internet Explorer e Firefox

E non si dica che non faccio titoli auto esplicativi!

Il problema è noto: Internet Explorer interpreta in maniera diversa il box model (le proprietà width, padding e border di un elemento) rispetto allo standard.

La soluzione è realizzare 2 css, uno standard per Firefox (style.css), richiamato dalla consueta dichiarazione

<link rel="stylesheet" type="text/css" href="style.css">

e uno ad hoc per Internet Explorer (style_ie.css) in tutto e per tutto uguale all’altro, tranne che per i valori dei box model, e che viene richiamato dall’istruzione

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style_ie.css">
<![endif]--> 

interpretata soltanto dal browser di casa Microsoft. Questa istruzione viene anche detta commento condizionale.

In Drupal si inserisce il commento condizionale nel file page.tpl.php del tema, nell’HEAD ovviamente, dopo i richiami ai css e agli script

<?php print $styles; ?>
<?php print $scripts; ?>

Nel commento, conviene inserire l’url assoluto!

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...