IE8 오버플로:최대 높이가 있는 자동
매우 많은 양의 데이터를 포함할 수 있는 요소가 있지만 페이지 레이아웃을 망치는 것을 원하지 않으므로 max-height: 100px및 overflow:auto, 콘텐츠가 맞지 않을 때 스크롤바가 표시되기를 바랍니다.
그것은 모든 파이어 폭스와 IE7에서 잘 작동하지만, 마치 IE8은 동작 overflow:hidden대신 출석했다 overflow:auto.
시도했지만 overflow:scroll여전히 도움이되지 않습니다. IE8은 스크롤 막대를 표시하지 않고 내용을 자릅니다. 변경 max-height에 선언을 height만든다 오버 플로우 작업 OK, 그것의 조합입니다 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 cruft를 제공한다는 의미이기 때문에 저는 그것을 싫어합니다.
{
overflow:auto
}
div 오버플로 시도:자동
나는 이것이 RC1에서 수정된 버그로 기록되는 것을 보았다. 그러나 hard assert 렌더링 실패를 일으키는 것으로 보이는 변형을 찾았습니다. 중첩 테이블에 이 두 스타일을 포함합니다.
<!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 덕분에 위의 코드가 저에게 효과적이었습니다.
비슷한 상황에서 maxHeight가 할당된 공간, 너비 100%, 자동 오버플로에 맞도록 js에서 설정한 사전 요소입니다. 내용이 maxHeight보다 짧고 가로로 맞으면 좋습니다. 내용이 더 이상 가로로 맞지 않도록 창 크기를 조정하면 가로 스크롤 막대가 나타나지만 내용의 높이에 관계없이 요소의 높이는 즉시 전체 maxHeight로 점프합니다.
Jeff가 언급한 다양한 형태의 CSS 해킹을 시도했지만 js 잘못된 매개변수 오류가 아닌 유사한 것을 찾지 못했습니다.
내가 찾을 수있는 최선은 ie8에 대한 독을 선택하는 것입니다. maxHeight 제한을 삭제하여 요소가 모든 높이(내 경우에 가장 적합함)가 될 수 있거나 maxHeight가 아닌 높이를 설정하면 콘텐츠 자체가 훨씬 짧습니다. 매우 이상적이지 않습니다. Wacked 동작은 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 */ }
이것은 나를 위해 완벽하게 작동하므로 이것을 공유하기로 결정했습니다.
참조URL : https://stackoverflow.com/questions/7707/ie8-overflowauto-with-max-height
'IT이야기' 카테고리의 다른 글
| 문자열 리터럴 대신 문자열에 대해 사용자 정의 리터럴을 사용할 때의 이점 (0) | 2021.09.25 |
|---|---|
| FutureWarning: 요소별 비교에 실패했습니다. (0) | 2021.09.25 |
| jpa에서 생성된 테이블의 잘못된 순서 (0) | 2021.09.25 |
| GNU make의 -j 옵션 (0) | 2021.09.25 |
| HTML/JS WYSIWYG 편집기를 만드는 방법 (0) | 2021.09.24 |