Overflow IE8: automatico con altezza massima
https://stackoverflow.com/questions/7707
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho un elemento che può contenere quantità molto grandi di dati, ma non voglio che rovini il layout della pagina, quindi imposto max-height: 100px E overflow:auto, sperando che vengano visualizzate le barre di scorrimento quando il contenuto non si adatta.
Funziona tutto bene in Firefox e IE7, ma IE8 si comporta come se overflow:hidden era presente invece di overflow:auto.
ho provato overflow:scroll, ancora non aiuta, IE8 tronca semplicemente il contenuto senza mostrare le barre di scorrimento.Mutevole max-height dichiarazione a height fa funzionare l'overflow OK, è la combinazione di max-height E overflow:auto che rompe le cose.
Anche questo viene registrato come an bug ufficiale nella versione finale di IE8
Esiste una soluzione alternativa?Per ora sono ricorso all'utilizzo height invece di max-height, ma lascia molto spazio vuoto nel caso in cui non ci siano molti dati.
Soluzione
Questo è un bug davvero fastidioso poiché ci influenza pesantemente su Stack Overflow <pre> blocchi di codice, che hanno max-height:600 E width:auto.
Viene registrato come bug nella versione finale di IE8 senza correzione.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
Esiste una soluzione CSS davvero, davvero complicata:
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none\9
}
e ovviamente CSS condizionale come altri hanno già detto, ma non mi piace perché significa che stai offrendo risorse HTML extra in ogni richiesta di pagina.
Altri suggerimenti
{
overflow:auto
}
Prova div overflow:auto
Ho visto questo registrato come un bug corretto in RC1.Ma ho trovato una variazione che sembra causare un errore di rendering dell'asserzione difficile.Coinvolge questi due stili in una tabella nidificata.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
.calendarBody
{
overflow: scroll;
max-height: 500px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
This is a cell in the outer table.
<div class="calendarBody">
<table>
<tbody>
<tr>
<td>
This is a cell in the inner table.
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
{max-height:200px, Overflow:auto}
Grazie a Srinivas Tamada, il codice sopra ha funzionato per me.
Situazione simile, un elemento pre con maxHeight impostato da js per adattarsi allo spazio assegnato, larghezza 100%, overflow automatico.Se il contenuto è più corto di maxHeight e si adatta anche in orizzontale, va bene.Se ridimensioni la finestra in modo che il contenuto non si adatti più in orizzontale, viene visualizzata una barra di scorrimento orizzontale, ma l'altezza dell'elemento passa immediatamente all'intero maxHeight, indipendentemente dall'altezza del contenuto.
Ho provato varie forme dell'hacking CSS menzionato da Jeff, ma non ho trovato nulla di simile che non fosse un errore di parametro errato js.
La cosa migliore che ho trovato è stata scegliere il tuo veleno per ie8:Rilascia il limite maxHeight, quindi l'elemento può avere qualsiasi altezza (meglio per il mio caso), oppure imposta l'altezza anziché maxHeight, quindi è sempre così alto anche se il contenuto stesso è molto più corto.Molto non ideale.Il comportamento stravagante è scomparso in ie9.
Imposta solo l'altezza massima e non impostare l'overflow.In questo modo mostrerà la barra di scorrimento se il contenuto è superiore all'altezza massima e si ridurrà se il contenuto è inferiore all'altezza massima.
Per riprodurre:
(Questo manda in crash l'intera pagina.)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
X
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(Mentre questo funziona bene...)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
The quick brown fox
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(E, follemente, anche questo.[Nessun contenuto nel div.])
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ho trovato questo :https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
Questo metodo è stato verificato in IE6 e dovrebbe funzionare anche in IE5.Basta modificare i valori in base alle proprie esigenze (codice commentato con note esplicative).In questo esempio, impostiamo l'altezza massima su 333px 1 per IE e tutti i browser conformi agli standard:
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
e questo funziona perfettamente per me, quindi ho deciso di condividerlo.
