2009-04-07 4 views
10

Tôi có bảng sau:Bảng chiều cao hàng trong Internet Explorer

<table> 
    <tr> 
     <td style="height: 7px; width: 7px"> A1 </td> 
     <td style="height: 7px"> B1 </td> 
     <td style="height: 7px; width: 7px"> C1 </td> 
    </tr> 
    <tr> 
     <td style="width: 7px"> A2 </td> 
     <td> B2 </td> 
     <td style="width: 7px"> C2 </td> 
    </tr> 
    <tr> 
     <td style="height: 7px; width: 7px"> A3 </td> 
     <td style="height: 7px"> B3 </td> 
     <td style="height: 7px; width: 7px"> C3 </td> 
    </tr> 
</table> 

Ý tưởng cơ bản là hàng đầu tiên phải cao 7 pixel. Các ô bên trái và bên phải (A1 và C1) phải rộng 7px và ô giữa (B1) phải co giãn theo chiều rộng của bảng. Điều tương tự cũng xảy ra đối với hàng dưới cùng (A3, B3, C3).

Hàng ở giữa, tuy nhiên, cần phải mở rộng theo chiều cao - nói cách khác, nó cần phải là (tableheight - 14px). Các ô bên trái và bên phải (A2, C2) cần rộng 7 pixel.

Một ví dụ:

   7px    x    7px 
      |------|-------------------------|------| 

---  +------+-------------------------+------+ 
|  |  |       |  | 
| 7px |  |       |  | 
|  |  |       |  | 
---  +------+-------------------------+------+ 
|  |  |       |  | 
|  |  |       |  | 
|  |  |       |  | 
|  |  |       |  | 
| y  |  |       |  | 
|  |  |       |  | 
|  |  |       |  | 
|  |  |       |  | 
|  |  |       |  | 
---  +------+-------------------------+------+ 
|  |  |       |  | 
| 7px |  |       |  | 
|  |  |       |  | 
---  +------+-------------------------+------+ 

TUY NHIÊN: Trong Internet Explorer, độ rộng hoạt động tốt (cột A và C là 7px, cột B quy mô tự động) - nhưng chiều cao thì không. Hàng 1, 2 và 3 lần lượt là chính xác 33% chiều cao của bảng, bất kể tôi làm gì. Thật không may tôi phải sử dụng bảng này, vì vậy thay thế nó bằng một bộ DIV không phải là một lựa chọn.

Tôi có DOCTYPE sau:

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

tôi cần phải ghi nhớ điều này, như một số yếu tố khác trên trang dựa trên một số bố trí dựa trên CSS phức tạp.

Có ai có thể chỉ cho tôi đúng hướng để chuyển hình dạng này thành hình dạng cho IE không?

CHỈNH SỬA: Nên đề cập trước đó - bảng này được thay đổi kích cỡ khi đang chạy bằng javascript.

Trả lời

1

Thay vì sử dụng chiều cao thích hợp (vì các vấn đề gây ra), bạn có thể sử dụng miếng đệm. Đối với exampel một gif nhỏ trong suốt mà u thiết lập chiều cao cho số tiền bạn muốn quá. Các gif bạn sẽ chỉ làm như thế này: <img src="./gfx/spacer.gif" style="height:14px;" />

+0

Tôi sợ rằng, vì Internet Exploder, tôi không có lựa chọn nào khác ngoài việc làm điều này và cập nhật chiều cao của GIF khi hộp được thay đổi kích thước. Chúc mừng cho con trỏ! :) –

+1

Ergh ... Tôi nghĩ rằng việc sử dụng bố cục dựa trên CSS có nghĩa là cái chết của miếng đệm GIF bị chết. Đoán không hả? –

1

bảng này được thay đổi kích cỡ khi đang chạy bằng javascript.

Sau đó thế nào về cũng thiết lập:

table.rows[1].style.height= (totalheight-14)+'px'; 

rõ ràng?

Các thực tế trường học cũ đúng câu trả lời cho điều này là:

<tr height="7">...<tr> 
<tr height="*">...<tr> 
<tr height="7">...<tr> 

Thật không may, trình duyệt không bao giờ thực sự được hỗ trợ HTML ‘*’/‘n *’ cú pháp. Bạn có thể nói:

<tr style="height: 7px;">...</tr> 
<tr style="height: 100%;">...</tr> 
<tr style="height: 7px;">...</tr> 

nhưng IE thực hiện điều này và làm cho hàng ở giữa 100% chiều cao của toàn bộ bảng (do đó làm cho bảng cao hơn mức cao nhất). Bạn có thể sử dụng kết hợp này với một bản hack IE để làm cho chiều cao của bảng nhỏ hơn 14px trên trình duyệt đó, có lẽ.

8

Trong quá khứ tôi đã nhận thấy rằng thuộc tính chiều cao của các ô bị ghi đè bởi kích thước phông chữ bên trong ô, ngay cả khi không có phông chữ. Đặt kích thước phông chữ thành 1 hoặc 0 px và chiều cao của bạn sẽ thực sự có hiệu lực.

+0

Cảm ơn, điều này thực sự đã giúp tôi! –

4

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
1

Những gì tôi làm là tuyên bố các cột ngoài cùng đầu tiên với tất cả các hàng chiều rộng và chiều cao, sau đó tôi kết hợp tất cả các hàng trong cột ở giữa với rowspan.

Đối với chiều cao, ở cột giữa khi đã hợp nhất, tôi chỉ viết <tr width và không có chiều cao, tất cả các trình duyệt đều không hỗ trợ chiều cao mà tôi nghĩ. Không cần GIF. Nó đã làm việc cho tôi mọi lúc.

Hy vọng điều này có thể hữu ích.

1

Có vấn đề về chiều cao hàng quá cao IE9-Beta hiển thị trong bản xem trước cũng như bản in được in &. Ví dụ, vấn đề hàng-chiều cao xảy ra khi bạn cố gắng in một dòng cao 1px. Để khắc phục, tôi đã thêm <div style="font-size:0pt;"> ... </div> xung quanh toàn bộ khối mã HTML.

1

Tôi vừa gặp sự cố tương tự. Tôi nhận thấy trong IE các width sở hữu đôi khi cần phải được định nghĩa là một tỷ lệ phần trăm để làm việc với IE

style="width: 25%" 

sau đó được xác định hoàn toàn trong css cho qua trình duyệt liên tục

.squares { 
text-align: left; 
margin: 0 auto; 
height:250px; width:250px; 
} 
0

Hãy thử điều này ... nó làm việc cho tôi ...

<td style="height:2px;font-size:2px;"> 
    <img height="2px" alt="" src="images/transparent.gif" /> 
</td> 
1

thử này

<table> 
    <tr> 
     <td style="height: 7px; width: 7px"> A1 </td> 
     <td style="height: 7px"> B1 </td> 
     <td style="height: 7px; width: 7px"> C1 </td> 
    </tr> 
    <tr height="100%"> 
     <td style="width: 7px"> A2 </td> 
     <td> B2 </td> 
     <td style="width: 7px"> C2 </td> 
    </tr> 
    <tr> 
     <td style="height: 7px; width: 7px"> A3 </td> 
     <td style="height: 7px"> B3 </td> 
     <td style="height: 7px; width: 7px"> C3 </td> 
    </tr> 
</table> 
+0

Chào mừng bạn đến với SO. Bạn có thể làm nổi bật sự khác biệt với mã của câu hỏi và giải thích lý do tại sao nó nên hoạt động? –