IE8 오버플로:자동(최대 높이 포함)
https://stackoverflow.com/questions/7707
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
매우 많은 양의 데이터를 포함할 수 있는 요소가 있지만 페이지 레이아웃을 망치고 싶지 않기 때문에 다음과 같이 설정했습니다. max-height: 100px 그리고 overflow:auto, 내용이 맞지 않을 때 스크롤바가 나타나기를 바랍니다.
Firefox와 IE7에서는 모두 잘 작동하지만 IE8은 마치 overflow:hidden 대신에 있었다 overflow:auto.
나는 노력했다 overflow:scroll, 여전히 도움이 되지 않습니다. IE8은 스크롤 막대를 표시하지 않고 단순히 내용을 자릅니다.바꾸다 max-height 선언 height 오버플로 작업을 정상적으로 수행합니다. 이는 다음의 조합입니다. max-height 그리고 overflow:auto 그것은 일을 망친다.
이것도 다음과 같이 기록됩니다. IE8 최종 릴리스 버전의 공식 버그
해결 방법이 있나요?지금은 height 대신에 max-height, 데이터가 많지 않을 경우를 대비해 빈 공간을 넉넉하게 남겨둡니다.
해결책
이것은 스택 오버플로에 큰 영향을 미치기 때문에 정말 불쾌한 버그입니다. <pre> 코드 블록 max-height:600 그리고 width:auto.
이는 수정 사항 없이 IE8 최종 버전에서 버그로 기록됩니다.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
정말 정말 해킹된 CSS 해결 방법이 있습니다.
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
}
물론 다른 사람들이 언급한 것처럼 조건부 CSS도 있지만 저는 그것이 마음에 들지 않습니다. 왜냐하면 모든 페이지 요청에서 추가 HTML을 제공한다는 의미이기 때문입니다.
다른 팁
{
overflow:auto
}
div Overflow:auto를 사용해 보세요.
나는 이것이 RC1에서 수정된 버그로 기록되는 것을 보았습니다.하지만 하드 어설션 렌더링 실패를 일으키는 것으로 보이는 변형을 발견했습니다.이 두 가지 스타일을 중첩된 테이블에 포함합니다.
<!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}
Srinivas Tamada 덕분에 위 코드가 저에게 효과적이었습니다.
비슷한 상황, 할당된 공간, 너비 100%, 오버플로 자동에 맞게 js에 의해 설정된 maxHeight가 있는 사전 요소입니다.콘텐츠가 maxHeight보다 짧고 가로에도 맞으면 괜찮습니다.콘텐츠가 더 이상 가로로 맞지 않도록 창 크기를 조정하면 가로 스크롤 막대가 나타나지만 콘텐츠 높이에 관계없이 요소 높이가 즉시 전체 maxHeight로 이동합니다.
Jeff가 언급한 다양한 형태의 CSS 해킹을 시도했지만 js 잘못된 매개변수 오류가 아닌 유사한 항목을 찾지 못했습니다.
내가 찾을 수 있는 가장 좋은 것은 ie8에 대한 독을 선택하는 것이었습니다.maxHeight 제한을 삭제하여 요소가 임의의 높이(내 경우에 가장 적합)가 될 수 있도록 하거나, maxHeight가 아닌 높이를 설정하여 콘텐츠 자체가 훨씬 짧더라도 항상 그 높이를 유지하도록 합니다.매우 이상적이지 않습니다.ie9에서는 이상한 행동이 사라졌습니다.
최대 높이만 설정하고 오버플로는 설정하지 마세요.이렇게 하면 콘텐츠가 최대 높이보다 크면 스크롤 막대가 표시되고 콘텐츠가 최대 높이보다 작으면 축소됩니다.
재현하려면:
(전체 페이지가 충돌합니다.)
<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>
(이건 잘 작동하지만...)
<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>
(그리고 미친듯이, 이것도 마찬가지다.[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>
나는 이것을 찾았다 :https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
이 방법은 IE6에서 검증되었으며 IE5에서도 작동합니다.필요에 맞게 값을 변경하기만 하면 됩니다(설명 메모와 함께 주석이 달린 코드).이 예에서는 IE 및 모든 표준 호환 브라우저에 대해 최대 높이를 333px 1로 설정합니다.
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
이것은 나에게 완벽하게 작동하므로 이것을 공유하기로 결정했습니다.
