Larghezza minima in MSIE 6
https://stackoverflow.com/questions/93274
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Quale è definitivo modo per imitare la proprietà CSS min-width in Internet Explorer 6?È meglio non provarci?
Soluzione
foo { min-width: 100px } // for everyone
* html foo { width: 100px } // just for IE
(o fornire un foglio di stile separato a IE utilizzando commenti condizionali)
Altri suggerimenti
Potresti usare un'espressione (come suggerito da HBoss), ma se sei preoccupato per le prestazioni, il modo migliore per farlo è aggiungere uno spessore all'interno dell'elemento a cui vuoi applicare una larghezza minima.
<div id="container">
The "shim" div will hold the container div open to at least 500px!
You should be able to put it anywhere in the container div.
<div class="shim"> </div>
</div>
#container .shim {
width: 500px;
height: 0;
line-height: 0;
}
Ciò richiede un po' di markup non semantico ma è una vera soluzione cross-browser e non richiede il sovraccarico derivante dall'utilizzo di un'espressione.
Questo articolo su CSS Play, di Stu Nicholls, mostra i diversi metodi per ottenere la larghezza minima in IE, in tutte le modalità (Quirks, ecc.) e anche per IE/Mac.
Ho giocherellato con ogni risposta data qui nell'ultimo mese.E dopo aver giocato con il metodo Pretaul (Larghezza minima in MSIE 6), sembra essere la migliore alternativa a min-width.Nessun hack o altro, solo codice CSS conforme che richiede 30 secondi per essere implementato.
Cercando su Google, le espressioni sembrano essere le più popolari.Per quanto mi riguarda, comunque, tendeva a bloccare in modo casuale il mio browser (sia IE che FF).
Non lo so, ho avuto un certo successo con:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
Una combinazione di hack veloce e altezza minima di Dustin Diaz Come posso specificare in HTML o CSS la larghezza minima assoluta di una cella di tabella
inserisci il tag CSS come _Width:500px o altro.
Funziona piuttosto bene...
div.container {
min-width: 760px;
width:expression(document.body.clientWidth < 760? "760px": "auto" );
}
Hack veloce ad altezza minima funziona per me (funziona anche per la larghezza)
L'esempio shim va bene per forzare il browser a mostrare una barra di scorrimento orizzontale quando il contenitore raggiunge una certa dimensione, ma noterai che il contenuto nel contenitore verrà comunque ridimensionato man mano che la finestra si riduce.Immagino che questo non sia l'obiettivo generale quando si tenta di raggiungere la larghezza minima in IE 6.
Inoltre, l'uso di espressioni e altri folli hack CSS non è semplicemente una buona pratica.Sono pericolosi e impuri.Questo articolo spiega gli avvertimenti sugli hack CSS e perché dovrebbero essere evitati del tutto.
Personalmente considero il post di scaryjeff il miglior consiglio per ottenere una vera larghezza minima in IE6 e come sviluppatore esperto di layout CSS devo ancora trovare una soluzione migliore che sia applicabile a problemi di questo tipo.
Questo articolo su CSS Play, di Stu Nicholls, mostra i diversi metodi per ottenere la larghezza minima in IE, in tutte le modalità (Quirks, ecc.) e anche per IE/Mac.
Ho fornito una risposta a una domanda simile che descrive in dettaglio l'uso di questa tecnica per ottenere correttamente la larghezza minima.Può essere visualizzato qui:
CSS:Due colonne di fluido al 50% che non rispettano la larghezza minima
La tecnica è un CSS semplice e valido che può essere utilizzato in quasi tutte le situazioni.Applicato all'esempio dello spessore sopra riportato, si ottiene quella che considero la corretta funzionalità di larghezza minima.
Pulsante a linea singola
button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}
Utilizza i commenti condizionali per fare riferimento al foglio di stile specifico di MSIE 6, quindi crea CSS come di seguito.
I browser compatibili utilizzeranno:
min-width: 660px;
Quindi MSIE 6 utilizzerà:
width: expression((document.body.clientWidth < 659)? "660px" : "auto");
