Tôi có phần tử có thể chứa lượng dữ liệu rất lớn, nhưng tôi không muốn nó làm hỏng bố cục trang, vì vậy tôi đặt max-height: 100px và overflow:auto, hy vọng thanh cuộn xuất hiện khi nội dung không phù hợp.Lỗi tràn IE8: tự động có chiều cao tối đa

Tất cả hoạt động tốt trong Firefox và IE7, nhưng IE8 hoạt động như thể overflow:hidden đã có mặt thay vì overflow:auto.

Tôi đã thử overflow:scroll, vẫn không trợ giúp, IE8 chỉ cắt ngắn nội dung mà không hiển thị thanh cuộn. Thay đổi tuyên bố max-height thành height làm cho tác vụ tràn OK, đó là sự kết hợp của max-height và overflow:auto làm hỏng mọi thứ.

này cũng được ghi lại như một official bug in the final, release version of IE8

Có một cách giải quyết? Hiện tại, tôi đã sử dụng height thay vì max-height nhưng để lại nhiều không gian trống trong trường hợp không có nhiều dữ liệu.

Nguồn

2008-08-11 Rytis

Lưu ý: điều này xuất hiện cố định trong IE9 (ít nhất, trong RC) –

Chỉ cần một lưu ý cho ppl người tìm thấy điều này sau, tôi đã thấy thiết lập tối đa chiều cao và tràn trên một div trong IE8 sụp đổ toàn bộ trang - như trong trang vẫn trống hoàn toàn, nhưng tiêu đề trang được hiển thị. Vui vẻ thú vị ... – James

Có, thiết lập chiều cao và chiều cao tối đa đã khiến trang không hiển thị (hoàn toàn trống). Tôi chuyển sang overflow-y kể từ khi làm việc cho các nhu cầu của tôi. –

Đây là một lỗi rất khó chịu vì nó ảnh hưởng đến chúng ta nhiều vào Stack Overflow với <pre> khối mã, trong đó có max-height:600 và width:auto.

Nó được ghi lại dưới dạng lỗi trong phiên bản cuối cùng của IE8 mà không khắc phục được.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

Có một thực sự, thực sự hacky CSS workaround:

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 
}

và CSS dĩ nhiên có điều kiện như những người khác đã đề cập đến, nhưng tôi không thích điều đó bởi vì nó có nghĩa là bạn' đang phục vụ thêm phần thưởng HTML bổ sung trong mọi yêu cầu trang.

Nguồn

2009-05-19 08:34:12

+1 nhưng tôi muốn tôi có thể +10 này ... –

Tôi nhận được 404 trên liên kết Microsoft. –

Điều này không hoạt động trong IE8! – kheya

Tôi thấy đăng nhập này là lỗi cố định trong RC1. Nhưng tôi đã tìm thấy một biến thể mà dường như gây ra một sự khẳng định khó làm cho thất bại. Liên kết hai kiểu này trong bảng lồng nhau.

<!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>

Nguồn

2009-03-20 22:15:05

Để tái sản xuất:

(Điều này bị treo toàn bộ trang.)

<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>

(Trong khi này hoạt động tốt ...)

<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>

(Và, điên cuồng, vì vậy thực hiện điều này . [Không có nội dung nào trong div cả.])

<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>

Nguồn

2010-10-05 10:27:17 ANeves

{ 
overflow:auto 
}

Hãy thử div overflow: auto

Nguồn

2011-02-11 13:26:05 Egglabs

{max-height:200px, Overflow:auto}

Nhờ Srinivas Tamada, Đoạn mã trên đã làm việc cho tôi.

Nguồn

2011-05-03 10:00:08 ashipj

Tình huống tương tự, phần tử tiền tố có maxHeight được đặt bằng js để vừa với không gian được phân bổ, chiều rộng 100%, tự động tràn.Nếu nội dung ngắn hơn maxHeight và cũng phù hợp theo chiều ngang, chúng tôi tốt. Nếu bạn thay đổi kích thước cửa sổ sao cho nội dung không còn phù hợp theo chiều ngang nữa, thanh cuộn ngang xuất hiện, nhưng chiều cao của phần tử ngay lập tức nhảy tới toàn bộ tối đa, bất kể chiều cao của nội dung.

Đã thử các dạng khác nhau của hack css được đề cập bởi Jeff, nhưng không tìm thấy bất kỳ thứ gì giống như nó không phải là lỗi tham số xấu js.

Tốt nhất tôi có thể tìm là chọn chất độc của bạn cho ie8: Hoặc giảm giới hạn maxHeight, vì vậy yếu tố có thể là bất kỳ chiều cao nào (tốt nhất cho trường hợp của tôi) hoặc đặt chiều cao thay vì maxHeight, vì vậy nó luôn cao bản thân nội dung ngắn hơn nhiều. Rất không lý tưởng. Hành vi bị lỗi đã biến mất trong ie9.

Nguồn

2011-08-18 18:57:37 enigment

Chỉ đặt chiều cao tối đa và không đặt tràn. Bằng cách này, nó sẽ hiển thị thanh cuộn nếu nội dung lớn hơn chiều cao tối đa và co lại nếu nội dung nhỏ hơn chiều cao tối đa.

Nguồn

2012-11-01 07:47:06

Tôi thấy điều này: https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

Phương pháp này đã được xác minh trong IE6 và cũng nên làm việc trong IE5. Chỉ cần thay đổi các giá trị cho phù hợp với nhu cầu của bạn (mã nhận xét với ghi chú giải thích). Trong ví dụ này, chúng tôi đang thiết lập max-height tại 333px 1 cho IE và các trình duyệt tiêu chuẩn phù hợp:

* html div#division { height: expression(this.scrollHeight > 332 ? "333px" : "auto"); /* sets max-height for IE */ }

và các công trình này cho tôi một cách hoàn hảo vì vậy tôi quyết định chia sẻ này.

Nguồn

2015-11-17 17:40:20

Lỗi tràn IE8: tự động có chiều cao tối đa

Trả lời

Để tái sản xuất:

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