Débordement IE8 : auto avec hauteur maximale
https://stackoverflow.com/questions/7707
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai un élément qui peut contenir de très grandes quantités de données, mais je ne veux pas que cela gâche la mise en page, j'ai donc défini max-height: 100px et overflow:auto, en espérant que des barres de défilement apparaissent lorsque le contenu ne rentre pas.
Tout fonctionne bien dans Firefox et IE7, mais IE8 se comporte comme si overflow:hidden était présent à la place de overflow:auto.
J'ai essayé overflow:scroll, n'aide toujours pas, IE8 tronque simplement le contenu sans afficher les barres de défilement.En changeant max-height déclaration à height fait fonctionner le débordement correctement, c'est la combinaison de max-height et overflow:auto ça casse les choses.
Ceci est également enregistré en tant que bug officiel dans la version finale d'IE8
Y at-il un travail autour?Pour l'instant, j'ai eu recours à l'utilisation height au lieu de max-height, mais cela laisse beaucoup d'espace vide au cas où il n'y aurait pas beaucoup de données.
La solution
C'est un bug vraiment méchant car il nous affecte fortement sur Stack Overflow avec <pre> blocs de code, qui ont max-height:600 et width:auto.
Il est enregistré comme un bug dans la version finale d'IE8 sans correctif.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
Il existe une solution de contournement CSS vraiment très compliquée :
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
}
et bien sûr du CSS conditionnel comme d'autres l'ont mentionné, mais je n'aime pas cela car cela signifie que vous servez du HTML supplémentaire dans chaque demande de page.
Autres conseils
{
overflow:auto
}
Essayez le débordement de div : auto
J'ai vu cela enregistré comme un bug corrigé dans RC1.Mais j'ai trouvé une variation qui semble provoquer un échec de rendu d'assertion difficile.Implique ces deux styles dans une table imbriquée.
<!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}
Merci à Srinivas Tamada, le code ci-dessus a fonctionné pour moi.
Situation similaire, un élément pré avec maxHeight défini par js pour s'adapter à l'espace alloué, largeur 100 %, débordement automatique.Si le contenu est plus court que maxHeight et s’adapte également horizontalement, tout va bien.Si vous redimensionnez la fenêtre pour que le contenu ne s'adapte plus horizontalement, une barre de défilement horizontale apparaît, mais la hauteur de l'élément passe immédiatement à la hauteur maximale maximale, quelle que soit la hauteur du contenu.
J'ai essayé diverses formes de hack CSS mentionné par Jeff, mais je n'ai rien trouvé de semblable qui ne soit pas une erreur de mauvais paramètre js.
Le mieux que j'ai pu trouver était de choisir votre poison pour ie8 :Soit supprimez la limite maxHeight, afin que l'élément puisse avoir n'importe quelle hauteur (ce qui est le mieux dans mon cas), soit définissez la hauteur plutôt que maxHeight, de sorte qu'il soit toujours aussi grand même si le contenu lui-même est beaucoup plus court.Très pas idéal.Le comportement farfelu a disparu dans ie9.
Définissez uniquement la hauteur maximale et ne définissez pas le débordement.De cette façon, il affichera la barre de défilement si le contenu est supérieur à la hauteur maximale et rétrécira si le contenu est inférieur à la hauteur maximale.
Reproduire:
(Cela plante toute la page.)
<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>
(Alors que cela fonctionne bien...)
<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>
(Et, follement, ça aussi.[Aucun contenu dans le 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>
J'ai trouvé ça :https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
Cette méthode a été vérifiée dans IE6 et devrait également fonctionner dans IE5.Modifiez simplement les valeurs selon vos besoins (code commenté avec notes explicatives).Dans cet exemple, nous définissons la hauteur maximale à 333 px 1 pour IE et tous les navigateurs conformes aux normes :
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
et cela fonctionne parfaitement pour moi, alors j'ai décidé de partager ceci.
