2010-03-01 35 views
15

Tôi đã tìm thấy nhiều câu trả lời cho câu hỏi này trên Google, nhưng không có câu nào trong số đó có vẻ phù hợp với tất cả các trình duyệt.Chiều rộng tối thiểu CSS trong IE6, 7 và 8

Tôi đang tìm cách chỉ CSS để có chiều rộng tối thiểu hoạt động trên Firefox, IE6, IE7 và IE8. Người ta biết rằng IE không hỗ trợ độ rộng tối thiểu, do đó, một số hack được đưa ra ngoài để cố gắng mô phỏng hành vi của chiều rộng tối thiểu. Thật không may, tôi đã không có bất kỳ may mắn với họ.

Cụ thể, đây là những gì tôi đang cố gắng để làm:

<style type="text/css"> 
    table.dataTable td { 
     white-space: nowrap; 
    } 

    table.dataTable td.largeCell { 
     white-space: normal; 
     min-width: 300px; 
    } 
</style> 

<table class="dataTable"> 
    <tr> 
    <td>ID</td> 
    <td>Date</td> 
    <td>Title</td> 
    <td class="largeCell">A large amount of data like a description that could 
     span several lines within this cell.</td> 
    <td>Link</td> 
    </tr> 
</table> 

Có ai có một cách để có được điều này để làm việc?

+0

'chiều rộng tối thiểu 'được hỗ trợ trong IE> = 7 (mặc dù lỗi trong phiên bản 7). Nó đã được Firefox hỗ trợ cho các lứa tuổi. – Quentin

+0

Firefox không phải là vấn đề.Nó chỉ là tôi cần một giải pháp mà sẽ làm việc trên tất cả các trình duyệt này. Ngoài ra, tôi đang thử nghiệm 'min-width' trong IE8, và nó không làm việc cho tôi. – Aaron

+0

Đối với tất cả những người đã trả lời, tôi đang cố gắng giải quyết các giải pháp của bạn. – Aaron

Trả lời

14

Vì vậy, nó chỉ ra rằng việc hack cần thiết để nhận min-width để làm việc trong tất cả các trình duyệt không phải là xấu xí như nhiều làm cho nó ra được.

Tất cả những gì tôi phải làm là thêm CSS cho div trong largeCell và thêm div trống vào cuối ô. Các div chỉ cao 1px, do đó, nó không thực sự làm cho các tế bào trông lớn hơn nó nên được.

<style type="text/css"> 
    table.dataTable td { 
     white-space: nowrap; 
    } 

    table.dataTable td.largeCell { 
     white-space: normal; 
     min-width: 300px; 
    } 

    table.dataTable td.largeCell div { 
     margin: 0px 0px 0px 0px; 
     height: 1px; 
     width: 300px; 
    } 
</style> 

<table class="dataTable"> 
    <tr> 
    <td>ID</td> 
    <td>Date</td> 
    <td>Title</td> 
    <td class="largeCell">A large amount of data like a description that could 
     span several lines within this cell. 
     <div></div> 
    </td> 
    <td>Link</td> 
    </tr> 
</table> 
7

tôi sử dụng:

min-width: 200px; 
_width: 200px; /* IE6 */ 
+0

'_width' có phải là giá trị css được nhận dạng bởi IE6 không? Thật không may, điều này đã không làm việc cho tôi. – Aaron

+0

có, bạn có thể sử dụng _anything để khai báo thuộc tính duy nhất của IE6, đó là vào những ngày IE6 hack tuy nhiên tôi khuyên bạn nên sử dụng các chú thích có điều kiện nowdays – fire

0
<style type="text/css"> 
.table1 th a { 
    display:inline-block; 
    width:200px"; 
} 
</style> 

<table> 
    <tr> 
     <th><a>title1</a></th> 
     <th><a>title2</a></th> 
    </tr> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
</table> 
+1

Tại sao có dấu ngoặc kép sau chiều rộng: 200px – 123

3
min-height:expression(document.body.clientHeight +'px'); 
min-width:expression(document.body.clientWidth +'px'); 
+5

Điều này không thành công đối với tôi. Bạn luôn có thể trở thành một hướng dẫn bè vượt thác. Có thể không có nhiều cảm giác mạnh như chống lại các lỗi IE. – plntxt

+2

anh ấy .. Đó sẽ là một công việc tốt .. Tôi hy vọng tôi có thể ghi điểm nhiều hơn với nó ... :) Tôi yêu bình luận của bạn .. –

2

Theo mặc định chế độ tài liệu trong IE sẽ là chế độ Quirks

Giải pháp: thêm DOCTYPE trên đầu trang của trang html của bạn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2

Sau rất nhiều hack mà tôi đã cố gắng không ai trong số họ làm việc cho tôi vì điều này "min-width" vấn đề, nhưng cuối cùng tôi đã nhận giải pháp của mình cho IE 8.

Cố gắng sử dụng điều này: <!DOCTYPE html> làm loại DOC của bạn, đây là Loại HTML 5 DOC chuyển trang IE8 của bạn hoạt động giống như trình duyệt mozilla hoặc webkit.

Vì vậy, ngoài vấn đề chiều rộng và chiều cao tối thiểu, nó giải quyết nhiều vấn đề IE8 rất dễ dàng.

Nếu bài đăng của tôi giúp bạn, hãy gửi thư cho tôi bằng tên của bạn mà tên đó phù hợp với bạn.

+1

Loại tài liệu:

1

Tôi gặp sự cố tương tự, tôi cần trang web là 95% trừ khi nó nhỏ hơn 980px.

Không có gì ở đây hiệu quả, và trong tuyệt vọng, tôi đã đưa ra câu trả lời biểu hiện của Bill Burlington. Cái được đề cập ở trên không hiệu quả với tôi, nhưng nếu tôi sử dụng một biểu hiện mạnh mẽ hơn thì nó đã làm được!

width: expression (document.body.clientWidth < 980 ? "980px" : "95%"); 

Điều này về cơ bản là nếu chiều rộng nhỏ hơn 980px, đặt chiều rộng là 980px. Nếu nó rộng hơn, hãy đặt chiều rộng là 95%.

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