Débordement IE8: auto avec hauteur maximale

Question

Débordement IE8: auto avec hauteur maximale

Demandé el 11 de Août, 2008: Quand la question a-t-elle été
56533 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un élément qui peut contenir de très grandes quantités de données, mais je ne veux pas qu'il ruine la mise en page, j'ai donc mis en max-height: 100px et overflow:auto, en espérant pour les barres de défilement s'affiche lorsque le contenu ne correspond pas. Tout fonctionne très bien sous Firefox et IE7, mais IE8 se comporte comme si overflow:hidden était présent au lieu de overflow:auto. J'ai essayé d' overflow:scroll, ne fonctionne toujours pas, IE8 simplement tronque le contenu sans afficher les barres de défilement. Évolution max-height déclaration d' height rend le travail de débordement OK, c'est la combinaison de l' max-height et overflow:auto qui rompt les choses.

C'est également enregistré comme un fonctionnaire bug dans la dernière version de IE8:

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

Personne ne sait d'une solution de contournement? Pour l'instant, j'ai eu recours à l'aide d' height au lieu de max-height, mais il laisse beaucoup d'espace vide dans le cas où il n'existe pas beaucoup de données.

Avant de me dire de le faire, oui, j'ai signalé le bug de IE développeurs :)

Demandé el 11 de Août, 2008 par Rytis

Answer 1

5 Réponses

Answer 2

72voto

Jeff Atwood Points 31111

C'est vraiment un méchant bug que cela nous affecte lourdement sur un Débordement de Pile avec <pre> de blocs de code, qui ont max-height:600 et width:auto.

Il est enregistré comme un bug dans la version finale de IE8 avec pas de solution.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

Il est vraiment, vraiment hacky CSS solution de contournement:

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 conditionnelle CSS comme d'autres l'ont mentionné, mais je n'aime pas car cela signifie que vous servez HTML supplémentaire trucs à chaque demande de page.

Répondu el 19 de Mai, 2009 par Jeff Atwood (31111 Points )

Answer 3

4voto

Srinivas Points 684

 {
overflow:auto
}

Essayez div overflow: auto

Répondu el 11 de Février, 2011 par Srinivas (684 Points )

Answer 4

3voto

James Koch Points 278

J'ai vu cela enregistré comme un bogue corrigé dans RC1. Mais j'ai trouvé une variante qui semble provoquer un échec de rendu de l'assertion dure. 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>

Répondu el 20 de Mars, 2009 par James Koch (278 Points )

Answer 5

2voto

ashipj Points 364

 {max-height:200px, Overflow:auto}

Merci à Srinivas Tamada, le code ci-dessus a fonctionné pour moi.

Répondu el 3 de Mai, 2011 par ashipj (364 Points )

Answer 6

1voto

ANeves Points 2711

Reproduire:

(Cela bloque la page entière.)

 <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>

(Attendu que ça marche 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, c'est pareil. [Pas de contenu du 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>

Répondu el 5 de Octobre, 2010 par ANeves (2711 Points )

Débordement IE8: auto avec hauteur maximale

Réponses

Reproduire:

Questions en vedette

Top Tags

Prograide.com

Powered by:

Débordement IE8: auto avec hauteur maximale

Réponses

Reproduire:

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: