Estouro do IE8:auto com altura máxima
https://stackoverflow.com/questions/7707
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho um elemento que pode conter grandes quantidades de dados, mas não quero que isso estrague o layout da página, então defino max-height: 100px e overflow:auto, esperando que barras de rolagem apareçam quando o conteúdo não couber.
Tudo funciona bem no Firefox e no IE7, mas o IE8 se comporta como se overflow:hidden estava presente em vez de overflow:auto.
tentei overflow:scroll, ainda não ajuda, o IE8 simplesmente trunca o conteúdo sem mostrar as barras de rolagem.Mudando max-height declaração para height faz o overflow funcionar bem, é a combinação de max-height e overflow:auto isso quebra as coisas.
Isso também é registrado como um bug oficial na versão final do IE8
Existe uma solução alternativa?Por enquanto recorri a usar height em vez de max-height, mas deixa muito espaço vazio caso não haja muitos dados.
Solução
Este é um bug realmente desagradável, pois nos afeta fortemente no Stack Overflow com <pre> blocos de código, que possuem max-height:600 e width:auto.
Está registrado como um bug na versão final do IE8 sem correção.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
Existe uma solução alternativa de CSS muito, muito hackeada:
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, claro, CSS condicional, como outros mencionaram, mas não gosto disso porque significa que você está fornecendo conteúdo HTML extra em cada solicitação de página.
Outras dicas
{
overflow:auto
}
Experimente div overflow:auto
Eu vi isso registrado como um bug corrigido no RC1.Mas encontrei uma variação que parece causar uma falha de renderização de declaração difícil.Envolve esses dois estilos em uma tabela aninhada.
<!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}
Graças a Srinivas Tamada, o código acima funcionou para mim.
Situação semelhante, um pré-elemento com maxHeight definido por js para caber no espaço alocado, largura 100%, overflow automático.Se o conteúdo for menor que maxHeight e também caber horizontalmente, estamos bem.Se você redimensionar a janela para que o conteúdo não caiba mais horizontalmente, uma barra de rolagem horizontal aparecerá, mas a altura do elemento saltará imediatamente para maxHeight completo, independentemente da altura do conteúdo.
Tentei várias formas de hack css mencionado por Jeff, mas não encontrei nada parecido que não fosse um erro de parâmetro incorreto do js.
O melhor que consegui encontrar foi escolher seu veneno para o IE8:Elimine o limite maxHeight, para que o elemento possa ter qualquer altura (melhor para o meu caso) ou defina a altura em vez de maxHeight, para que seja sempre tão alto, mesmo que o conteúdo em si seja muito mais curto.Muito não é o ideal.O comportamento maluco desapareceu no IE9.
Defina apenas a altura máxima e não defina o estouro.Dessa forma, ele mostrará a barra de rolagem se o conteúdo for maior que a altura máxima e diminuirá se o conteúdo for menor que a altura máxima.
Reproduzir:
(Isso trava a página inteira.)
<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>
(Considerando que isso funciona bem...)
<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, loucamente, isso também.[Nenhum conteúdo na 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>
Eu achei isto :https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
Este método foi verificado no IE6 e também deve funcionar no IE5.Basta alterar os valores para atender às suas necessidades (código comentado com notas explicativas).Neste exemplo, estamos definindo a altura máxima em 333px 1 para o IE e todos os navegadores compatíveis com os padrões:
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
e isso funciona perfeitamente para mim, então decidi compartilhar isso.
