Chiều cao 100% không hoạt động đối với thẻ DIV trong Internet Explorer 8

Tôi có mã sau mà tôi đang sử dụng để hiển thị công cụ tìm kiếm có phần kết quả cuộn. Trong IE mã hoạt động tốt:Chiều cao 100% không hoạt động đối với thẻ DIV trong Internet Explorer 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html style="background:black;height:100%;width:100%;"> 
    <head> 
     <title>Report</title> 
    </head> 
    <body style="background:black;"> 
     <table HEIGHT="100%" WIDTH="100%" style="background:red;"> 
     <tr> 
     <td> 
     Search Area 
     </td> 
     </tr> 
     <tr> 
     <td HEIGHT="100%" WIDTH="100%" style="background:orange;"> 
     <div style="overflow-y:scroll;height:100%;"> 
      <table style="width:100px;height:1000px;"> 
      <tr> 
      <td style="background:white;"> 
      Results Area 
      </td> 
      </tr> 
      </table> 
     </div>  
     </td> 
     </tr> 
     </table> 
    </body> 
    </html>

Nhưng khi tôi thiết lập các thẻ meta để sử dụng IE8 định dạng bằng cách thêm:

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

Đáy thẻ DIV mở rộng vượt ra ngoài trang. Tôi đã thử một số tùy chọn mặc dù và không thể tìm thấy một cách xung quanh nó mà không thực sự xác định chiều cao cho các giá trị. Điều này sẽ không hoạt động vì tôi muốn trang chiếm 100% màn hình bất kể kích thước của cửa sổ trình duyệt.

Mọi trợ giúp sẽ được đánh giá cao.

Nguồn

2009-10-07 Anonymous

Bạn nên đặt tất cả lề và đệm cho các phần tử gốc thành 0 để có được những gì bạn muốn.

Cập nhật: Rất tiếc, không hiểu vấn đề cùng một lúc. Gợi ý của Ben nên là gợi ý tốt hơn. :)

Cập nhật 2: Rất tiếc, vì Ben đã xóa câu trả lời, bản cập nhật đầu tiên của tôi không có ý nghĩa gì. Hãy thử đặt chiều cao của cơ thể lên 100%, điều đó sẽ giải quyết được vấn đề.

Nguồn

2009-10-07 18:19:23 arno

Sự hiểu biết của tôi về CSS của trình duyệt chéo không lớn đến mức nó có thể không phải là giải pháp tốt nhất, nhưng đó là giải pháp.

Theo như tôi đã thấy, bạn luôn phải đặt chiều cao/chiều rộng của vùng chứa mà bạn muốn tràn, vì vậy bạn cần phải đặt chúng.

Để giải quyết độ phân giải, tôi khuyên bạn nên thêm tập lệnh jQuery tại sự kiện onReady tự động sửa chiều cao và chiều rộng làm cho tác vụ tràn.

Nguồn

2009-10-07 18:19:50 tucaz

Tôi đã gặp vấn đề tương tự như bạn và cuối cùng giải pháp là sửa đổi mục nhập CSS có điều chỉnh !important cho tuyên bố chiều cao cố định. Trong mã HTML, lớp (được định nghĩa trong CSS) có số height được gán cho 100%, nhưng CSS áp dụng !important trong khi tải kiểu.

Nguồn

2009-12-16 16:22:12 ocell

Thẻ meta này cho phép hiển thị CSS chính xác và trong CSS - theo thiết kế - height:100%basically doesn't work.

Bạn cần phải cung cấp chiều cao cụ thể để mỗi tổ tiên duy nhất của nguyên tố này, trong đó có <body>, <table>, <tr> và thậm chí <tbody> yếu tố đó tự động được chèn bằng cách phân tích cú pháp.

Dù sao, bố cục này có thể đạt được trong cách dễ dàng hơn:

.topBanner { 
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%; 
} 
body {padding-top: 2em}

này sẽ làm suy giảm độc đáo trong IE6, và không giống như overflow, sẽ hoạt động đúng trong Mobile Safari.

Nguồn

2009-12-20 23:52:41 Kornel

Edit:

Loại bỏ các khai báo DOCTYPE sẽ làm height = "100%" công việc nhưng nó đặt trình duyệt trong chế độ quirks tuy nhiên, đó không phải là mong muốn.

Nói chung, việc sử dụng bảng để bố cục không được khuyến khích, bạn nên sử dụng CSS thay thế.

Ví dụ: http://jsfiddle.net/rf649/7/

HTML

<div id="search">Search Area</div> 
<div id="results">Results Area</div>

CSS:

#search { 
    background-color: red; 
    position: fixed; 
    height: 150px; 
    width: 100%; 
} 
#results{ 
    background-color: orange; 
    position: fixed; 
    top: 150px; 
    width: 100%; 
    bottom: 0; 
    overflow: auto; 
}

Nguồn

2010-01-03 19:36:40

Loại bỏ các loại tài liệu có thể đẩy trang của bạn vào quirksmode mà rất có thể sẽ gây ra nhiều vấn đề hơn hơn là sửa lỗi. – Joel

@ JoelPotter - Tôi đồng ý, bạn nói đúng, tôi đã cập nhật câu trả lời –

CSS này cũng có các vấn đề liên quan đến khả năng tương thích giữa các trình duyệt (mặc dù có thể không tồi khi xóa DOCTYPE), vì IE6 không xử lý đúng cách ' position: fixed'. –

Chiều cao 100% không hoạt động đối với thẻ DIV trong Internet Explorer 8

Trả lời

Các vấn đề liên quan