Cách mô phỏng chiều rộng tối thiểu trong IE8

Tài liệu IE8 cho biết nó hỗ trợ độ rộng tối thiểu, nhưng nó dường như không hoạt động đối với tôi.Cách mô phỏng chiều rộng tối thiểu trong IE8

html tôi muốn có độ rộng tối thiểu là trong ô bảng.

Tôi thấy một câu hỏi khác ở đây đề xuất thêm div chiều cao 1 pixel cho mỗi ô, với cài đặt chiều rộng, nhưng không hoạt động - IE hiển thị cao 18 pixel vì lý do nào đó.

Đây là mã html:

<html> 
<head> 
<script src="jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
table.keyboard div.key { 
    height: 50px; 
    font-size:50px; 
    border: 5px outset gray; 
    min-width: 60px; 
    text-align: center; 
} 
table.keyboard div.spc { 
    height: 1px; 
    width: 60px; 
    background-color: green; 
} 

table.keyboard td:hover { 
    background-color: lightblue; 
} 
table.keyboard { 
    border: 3px inset blue; 
} 
</style> 
</head> 
<body> 
<div id="body"> 
<div>Here is some stuff</div> 
<table class='keyboard'> 
    <tbody> 
     <tr> 
      <td><div class='key'>1</div><div class='spc'></div></td> 
      <td><div class='key'>2</div><div class='spc'></div></td> 
      <td><div class='key'>3</div><div class='spc'></div></td> 
      <td><div class='key'>4</div><div class='spc'></div></td> 
      <td><div class='key'>5</div><div class='spc'></div></td> 
     </tr> 
    </tbody> 
</table> 
</div> 
</body> 
</html>

Các "SPC" div xuất hiện 18 px cao!

Tất nhiên, nếu min-width làm việc, tôi sẽ không cần div ...

<table class='keyboard'> 
    <tbody> 
     <tr> 
      <td><div class='key'>1</div></td> 
      <td><div class='key'>2</div></td> 
      <td><div class='key'>3</div></td> 
      <td><div class='key'>4</div></td> 
      <td><div class='key'>5</div></td> 
     </tr> 
    </tbody> 
</table>

Bất kỳ manh mối?

Để dễ dàng hơn, tôi đã đặt 3 phiên bản khác nhau của this code on my website.

Nguồn

2011-11-11 Nikki Locke

http://jsfiddle.net/3htmA/

IE8. mã của bạn hoạt động hoàn hảo.

Nguồn

2011-11-11 19:26:23 bravedick

Điều đó thật kinh khủng - nó hoạt động ở đó, nhưng không hoạt động trên trang web của tôi. Tôi tự hỏi sự khác biệt là gì? –

có thể có vấn đề gì đó với DOCTYPE? – bravedick

Không có loại tài liệu. –

Đặc tả TABLE HTML sử dụng COL để xác định chiều rộng cột. Xem spec sau: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4

Dưới đây là một ví dụ về cách sử dụng: http://www.htmldog.com/guides/htmladvanced/tables/

Min-width trên các tế bào bảng hoạt động khác với các yếu tố ở mức khối. Các ô bảng được kiểm soát ở cấp độ cột, không phải ở cấp ô riêng lẻ. Nếu một kích thước ô cụ thể tăng hoặc giảm, toàn bộ cột sẽ bị ảnh hưởng, trừ khi được kiểm soát rõ ràng bởi thẻ.

Nguồn

2011-11-11 19:25:10 Joshua

đặt chiều rộng tối thiểu thành div, không phải là td. tất cả công việc ok. – bravedick

Xin lỗi, tôi không hiểu. Tôi muốn tất cả các cột trong bảng có chiều rộng tối thiểu. Và tôi muốn cả cột bị ảnh hưởng. Không chắc tại sao tôi muốn giới thiệu các yếu tố col? –

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

table.keyboard .key 
{ 
min-width:60px; 
width: expression(this.width < 60 ? 60: true); 
}

rộng này biểu hiện là một thay thế cho min-width, nó coi là một cách giải quyết cho các phiên bản cũ của IE.

Tôi nghĩ rằng vấn đề của bạn là cột của bạn đang xác định chiều rộng của phần tử, chứ không phải div.

CHỈNH SỬA:

Đồng thời kiểm tra xem trình duyệt của bạn có ở chế độ tương thích không.

Nguồn

2011-11-11 19:27:28

Cách mô phỏng chiều rộng tối thiểu trong IE8

Trả lời

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