2011-12-13 41 views
9

Tôi muốn hiển thị văn bản trong bảng và tôi muốn cắt văn bản khi nó rộng hơn 150px, nhưng tôi không muốn chiều rộng cố định của ô bảng (nếu không có văn bản, chiều rộng sẽ là 0px). Mọi thứ đều hoạt động trong IE9, Firefox, Chrome, Opera nhưng không hoạt động trong IE8.Lỗi IE 8: ẩn và chiều rộng tối đa

dụ Mã trong IE8:

enter image description here

Mã ví dụ trong Chrome:

enter image description here

Dưới đây là các mã:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
td, span { 
    border: 1px solid red; 
    max-width: 150px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

span { 
    border: 1px solid green; 
    display: block; 
} 
</style> 
</head> 
<body> 
<table> 
<tr> 
    <td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td> 
    <td>Works in Firefox, Chrome (and Opera but no dots)</td> 
    <td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td> 
</tr> 
</table> 
</body> 
</html> 

Có thể làm như vậy mà không cần bất kỳ javascript hoặc cài đặt cố định chiều rộng?

+0

Thẳng thắn mà nói, nếu tôi là u tôi sẽ chỉ gửi một cảnh báo javascript khi ai đó mở trang ur với IE8. Đừng bận tâm làm cho trang của bạn tương thích với các trình duyệt IE bị lỗi, đó là lỗi của Microsoft không phải của bạn. – ApprenticeHacker

+0

Về ô đầu tiên, nó dường như không hoạt động trong IE7. Tôi sợ nó chỉ hoạt động trong IE9. –

+0

@IntermediateHacker Theo đặc tả CSS 2.1 ảnh hưởng của độ rộng tối đa trên ô bảng là không xác định. Thông số kỹ thuật có lỗi, không phải của Microsoft. – ZippyV

Trả lời

5

Thật không may IE7 và IE8 có hỗ trợ rất lỗi cho quy tắc css max-width. Vì vậy, không, bạn sẽ không thể thực hiện điều đó một cách đáng tin cậy nếu không có javascript hoặc độ rộng cố định. Nếu được, mã bạn có là được coi là để hoạt động trong IE 7+.

Nhưng bạn có thể làm cho nó rộng chỉ định cho những người hai trình duyệt bằng cách thêm một quy tắc css có điều kiện sau khi các quy tắc bạn phải ở trên:

<!--[if lte IE 8]> 
    <style> 
    td, span { 
     width: 150px; 
    } 
    </style> 
<![endif]--> 

Khi sau đó bạn di chuyển css của bạn vào một tập tin bên ngoài, bạn sẽ của Tất nhiên thay đổi điều đó với một thẻ liên kết:

<!--[if lte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8.css" /> 
<![endif]--> 

Ngoài ra, bạn có thể phát hiện IE 7 và 8 với javascript và chuyển hướng người dùng đến trang này: http://www.mozilla.org/de/firefox/new/

+0

maxWidth được giới thiệu trong Windows Internet Explorer 7. – ZippyV

+0

Vâng, điều đó hoàn toàn chính xác, tôi sẽ sửa lỗi đó. Tuy nhiên, nó là cực kỳ lỗi trong IE 7 và 8, như mã trong câu hỏi này chứng minh. Bản thân tôi đã chứng kiến ​​điều này để làm việc (trong IE 7/8) trên một máy tính, nhưng không phải trên một máy tính khác. Và như lorenzo-s đã chỉ ra, nó cũng không hiệu quả với anh ta. Nó rất có thể cập nhật phụ thuộc, nhưng bất cứ lý do gì, rõ ràng là không được dựa vào trong các trình duyệt này. – Donamite

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