siti compatibili con IE5.5/6/7/8 e Firefox3.5

Oggi giorno IE8 e Firefox3.5 si comportano quasi allo stesso modo.

Per ottimizzare un sito per i vecchi browser basta utilizzare i commenti condizionali di microsoft. In pratica si realizza il sito con un foglio di stile associato senza utilizzare il margin ma solo il padding. Il sito sarà uguale sia in IE8 che in Firefox3.5 ma sarà necessario utilizzare questi due commenti condizionali nella head del codice html del sito:

<!--[if IE 7]>
<style type="text/css">

</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">

</style>
<![endif]-->

In questo modo avremo due blocchi dove poter andare a scrivere le regole particolari per IE7 e quelli precendenti alla versione 7 di internet explorer.

Se non si è fatto uso di margin le differenze più eclatanti si noteranno nelle altezze delle <div> vuote in IE5.5 e 6 e nel posizionamento degli oggetti dei form, se ve ne sono. Comunque potrete scrivere le regole opzionale nei commenti condizionali in modo da andare a sovrascrivere il codice presente nel css linkato nella pagina che sarà inserito prima

Ecco un esempio che riporta ance il codice del pngfix per regolare la trasparenza delle png sui vecchi browser:

<link href="css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jq/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jq/thickbox-compressed.js"></script>
<!--[if IE 7]>
<style type="text/css">
#searchterm{top:1px}
.clear15{height:1px;}
.clear{height:1px;}
#destra table{padding-left:4px;width:140px; border:0px;float:left}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
#searchterm{top:1px}
.clear15{height:1px;}
.clear{height:1px;}
#destra table{padding-left:4px;width:140px; border:0px;float:left}
</style>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters))
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }   
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
</head>
<body>

Inoltre vi ricordo che per far rendere l'altezza giusta di una div vuota in IE5.5 e 6 bisogna aggiungerci dentro un commento:

Esempio:

<div style="clear:bot"><!-- HACK IE5.5 e 6 per le div --></div>

Spero che questa news sia utile a molti


yta union