Utilizziamo i cookie, anche di terze parti, per consentire la fruizione ottimale del sito. Cliccando sul tasto [OK], oppure proseguendo la navigazione, si accetta il nostro utilizzo dei cookie. Per maggiori informazioni o negare il consenso

Problemi di altezza e larghezza in IE

Stampa
Categoria: CSS
Scritto da Andrea Vittorini
Condividi

css-min-heightIl browser Internet Explorer ha un modo strano di fare le cose. Non è in grado di comprendere i comandi min-width e min-height, ma interpreta i comandi width e height come min-width e min-height - vai tu a capire!

Questo può causare problemi, perché per esempio potremmo avere bisogno di un widget con testo ridimensionabile in base alla larghezza o ridimensionabile dall'utente. Se usiamo solo i comandi width e height allora browser diversi da IE non consentiranno il ridimensionamento del widget. Se usiamo solo i comandi min-width e min-height poi non saremo in grado di controllare la larghezza o l'altezza in IE!

Questo può essere particolarmente problematico quando si utilizzano immagini di sfondo. Se si utilizza un'immagine di sfondo che è di 80px per 35px, allora ti consigliamo di fare in modo che la dimensione predefinita per il box che deve contenere questa immagine sia esattamente di 80px per 35px. Tuttavia, se gli utenti ridimensioneranno il testo allora sarà necessario che le dimensioni della casella di testo non si contraggano al di sotto di un minimo.

Per risolvere questo problema, è possibile utilizzare il seguente codice, con class = "box":

 


. box

{

width: 80px;

height: 35px;

}

html> body. box

{

width: auto;

height: auto;

min-width: 80px;

min-height: 35px;

}


Tutti i browser leggeranno la prima regola CSS, ma IE ignorerà la seconda regola perché fa uso del comando selettore child. I browser non-IE leggeranno la seconda e ignoreranno i valori della prima regola, perché questa seconda regola CSS è più specifica, e le regole CSS che sono più specifiche hanno sempre la priorità su quelle che lo sono meno.

Condividi

Commenti   

 
http://healthraport.
+1 #1 http://healthraport. 2015-07-22 14:10
Argomento interessante. Lo condivido!
Citazione
 

Aggiungi commento


Codice di sicurezza
Aggiorna

Design by Arteweb