Proprietà CSS Inline-Block Cross-Browser

Ryan Doherty ci propone un hack che permette alla proprietà CSS inline-block di poter essere compatibile con la maggior parte dei browser attualmente in circolazione. Per inciso, questa proprietà assegna un comportamento di tipo "inline" ad elementi di tipo "block" come, per esempio, il comportamento di default delle immagini!

Rispetto ad elementi di tipo "block" resi "flottanti", la proprietà "inline-block" consente un comportamento "normale", vale a dire che l'elemento viene allineato rispetto alla propria interlinea, così come effettivamente dovrebbe essere, nonostante gli elementi abbiano una altezza differente (un elemento di blocco con proprietà float eccede in altezza, superandola, la propria interlinea).

Di seguito possiamo vedere quanto sin qui scritto, mostrando i due diversi comportamenti riportati in 2 immagini:

Elementi con altezze diverse e proprietà "inline-block":

elementi inline-block
Elementi inline-block

Elementi con altezze diverse e proprietà "float":

comportamento errato con elementi flottanti
Comportamento errato con elementi flottanti

Si noti come la propietà inline-block offra tutti i vantaggi del caso.

Il codice CSS

<style>        
li {         
width: 200px;            
min-height: 250px;            
border: 1px solid #000;           
display: -moz-inline-stack;            
display: inline-block;           
margin: 5px;         
zoom: 1;           
*display: inline;        
_height: 250px;    
}  
</style>
 
<ul>       
<li>                
<div>                       
<h4>This is awesome</h4>                        
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>              
</div>        
</li>        
<li>              
<!-- etc ... -->       
</li>
</ul>                       

La proprietà è stata applicata agli elementi di un elenco e potrebbe esserci bisogno di qualche modifica. Il risultato è stato testato con Firefox versione 2 e 3, Safari 3, Opera e IE 6/7 Si attendono con ansia dei browser compatibili con i CSS3 e che siano utilizzati dal 90% degli utenti! * Utopia *

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati