`overflow:hidden` 및 부동 요소를 사용할 때 IE9에서 100% 너비 테이블이 제대로 확장되지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

`overflow:hidden` 및 부동 요소를 사용할 때 IE9에서 100% 너비 테이블이 제대로 확장되지 않는 이유는 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-12-13 09:26:10

원래의

602명이 탐색했습니다.

Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?

IE9 Float 문제: Overflow:Hidden 및 Table Width 100%

웹 레이아웃에서 테이블이 100인 특이한 문제에 직면합니다. % 너비가 오른쪽에 떠 있는 컨테이너를 따라 제대로 확장되지 않습니다. 이 문제는 Internet Explorer 9에서만 나타납니다. 이 문제를 해결하려면 페이지 헤더가 올바르게 구성되었는지 확인하는 것이 중요합니다.

Internet Explorer의 Overflow:hidden에 대한 해결 방법에는 다음 헤더를 추가하는 것이 포함됩니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
  .container{margin:0 auto; min-width:1000px; max-width:1200px;}
  .sidebar{float:right;width:300px;margin-left:5px;}
  .tholder{overflow:hidden;}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<img src="dsfd.jpg" height="600" width="295">
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>Text</td></tr></table>
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>Test goes here</td></tr></table>
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>text</td></tr></table>
</div>
</div>
</body>
</html>

로그인 후 복사

이 헤더를 구현하면 레이아웃이 Internet Explorer 9에서 일관되게 작동하여 부동 헤더와 함께 적절하게 확장되는 테이블을 표시할 수 있습니다. 컨테이너.

위 내용은 `overflow:hidden` 및 부동 요소를 사용할 때 IE9에서 100% 너비 테이블이 제대로 확장되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!