Chiều rộng tối đa không hoạt động trên Bảng cho IE7

Vậy tại sao "chiều rộng tối đa" không hoạt động trên Bảng trong Internet Explorer 7? Chiều rộng tối đa có sẵn trên các phần tử khác, và có vẻ hoạt động tốt, nhưng khi áp dụng cho một bảng, tôi không thể làm cho nó làm bất cứ điều gì, tức là quy tắc Max-Width chỉ đơn giản là bỏ qua. Dưới đây là các mã:Chiều rộng tối đa không hoạt động trên Bảng cho IE7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Foo</title> 
</head> 
<body> 
    <div style="background-color: Red; max-width: 1000px;"> 
     <table style="background-color: Green; max-width: 500px;"> 

       <tr> 
        <td><a href="#" class="action view">View</a></td> 
        <td>7/20/2011</td> 
        <td>James Smith</td> 
        <td>345 NW 23rd Ave Gainesville, FL 32606</td> 
        <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td> 
        <td>345621</td> 
        <td>Fred Smith</td> 
       </tr> 
     </table> 
    </div> 
</body> 
</html>

Trong Firefox, bảng được đúng chế để 500px, và các văn bản bên trong phá vỡ các tế bào theo những cách thích hợp (giữa các từ, giống như bạn mong muốn). Trong IE7 tuy nhiên, nó giống như quy tắc "no-wrap" đã được áp dụng. Mỗi ô trải dài đến mức cần thiết của nó, mà không cố gắng ngắt văn bản với ô, và toàn bộ bảng đơn giản trải ra để bỏ qua quy tắc chiều rộng tối đa.

Có chuyện gì với cái crap này? Làm thế nào để đặt Max-Width trên một bảng trong IE7? (Nó hoạt động tốt trong FF & IE8)

gì tôi đã cố gắng mà không hoạt động:

table {display: block; }

td {word-wrap: break-word; }

bảng {bố cục bảng: cố định; }

Nguồn

2011-08-11 Graham

Rõ ràng IE7 làm những việc khác nhau với 'max-width' tùy thuộc vào DTD: http://www.wileymedia.com/weblog/archives/2007/02/maxwidth_and_internet_explorer.html – vcsjones

Vâng tôi đã cố gắng một vài DocTypes khác nhau không có kết quả. Bài viết đó là đúng cho các phần tử cấp khối chung, nhưng nó không sửa bảng. – Graham

Các Thuộc tính chiều rộng tối đa được đặt cho bảng bị bỏ qua bởi trình duyệt WebKit, cả Chrome và Safari sẽ hiển thị bảng bỏ qua chiều rộng tối đa cũng như IE7. Tôi khuyên bạn nên đặt thuộc tính độ rộng tối đa thành phần tử trình bao bọc chẳng hạn như div.

Xem http://jsfiddle.net/P5YPR/1/

Nguồn

2011-08-11 15:12:12

+1 Tôi sẽ luôn hỗ trợ các giải pháp trình duyệt chéo trên các hack của IE. Làm tốt lắm. – AlienWebguy

@Alien Vui mừng khi biết điều đó :) –

vẫn không hoạt động trên IE7. Bất kỳ mẹo nào ??? –

Hãy thử điều này:

table#my_table { 
    max-width:500px; 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

Đáng tiếc là điều này sẽ không xác nhận do ?. Tin tốt là vì nó là một trình duyệt IE chỉ giải pháp bạn chỉ có thể làm yếu tố điều kiện khi bạn tạo <body> thẻ và cài đặt lớp IE-cụ thể:

<!--[if IE 9]><body class="ie9 ie"><![endif]--> 
<!--[if IE 8]><body class="ie8 ie"><![endif]--> 
<!--[if IE 7]><body class="ie7 ie"><![endif]--> 
<!--[if lte IE 6]><body class="ie6 ie"><![endif]--> 
<![if !IE]><body><![endif]>

Bây giờ trong CSS của bạn:

table#my_table { 
    width:500px; 
    max-width:500px; 
} 

.ie7 table#my_table { 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

Nguồn

2011-08-11 15:08:38 AlienWebguy

+1 Siiick. Tôi thường không khuyên bạn nên hỗ trợ IE <8 nhưng điều này là vững chắc. – Maverick

Điều này không giải quyết được WebKit. Safari và Chrome sẽ vẫn hiển thị bảng bỏ qua thuộc tính chiều rộng tối đa. Nếu @Graham thực sự quan tâm đến khả năng tương thích của trình duyệt chéo, phần tử bao bọc là thanh lịch hơn nhiều. –

Câu trả lời của bạn ở đây hoạt động rất tốt, nhưng tôi đã chọn Bjorn là "đúng" cho hoàn cảnh của tôi vì div wrapper là cần thiết, và những biểu hiện đó chỉ làm tôi sợ. Tôi thích bit của bạn về các lớp học trên cơ thể với các bình luận IE mặc dù! Cảm ơn! – Graham

Chiều rộng tối đa không hoạt động trên Bảng cho IE7

Trả lời

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