Lỗi IE với bảng và khoảng trắng của TD?

Question

Tôi có một trang đang sử dụng bảng, trong FF vv nó hoạt động hoàn hảo, nhưng trong IE7 nó gây ra vấn đề, về cơ bản là bốn góc có một td và và img (dạng góc tròn) .. nếu tôi xóa những gì thực sự xảy ra là nó messes lên các bảng .. nó đặt một dòng trắng mỏng giữa tr trên giữ 2 góc và tiếp theo tr

Tôi cần phải loại bỏ các các khoảng trắng giữa img và TD, là có một công việc tốt hơn xung quanh, như tôi đã có rất nhiều và không chỉ có vậy nếu tôi định dạng lại tài liệu vấn đề trả ..

đây là một ví dụ đơn giản ..

<table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23" 
      style="margin: 0px; padding: 0px"> 
      <tr> 
       <td width="12" align="left" valign="top"> 
        <img src="content/images/corner_left.gif" width="12" height="12" /> 
       </td> 

như bạn có thể nhìn thấy có khoảng trắng giữa img và td ... và tôi loại bỏ nó để nó trông như thế này:

<img src="content/images/corner_left.gif" width="12" height="12" /></td> 

vấn đề đã biến mất, (chú ý td và hình ảnh là ngay bên cạnh với nhau)

ý tưởng Bất kỳ, tôi đã cố gắng thiết lập tất cả các loại css, đệm 0px, lề 0px vv ...

Bất kỳ ý tưởng thực sự đánh giá cao.

Answer 1

Cách duy nhất để "khắc phục sự cố" (và tôi sử dụng cụm từ đó lỏng lẻo) là remove the whitespace.

Quan trọng hơn, bạn nên ngừng làm cho các trang web như đó là năm 2001. :)

Answer 2

IE thấy rằng có nội dung văn bản bên trong TD (không phải hình ảnh), do đó, nó cung cấp cho văn bản của nó line-height. Hãy thử đặt height và overflow: hidden cho TD.

Answer 3

Đó là cách này cho đến nay như xa như tôi có thể nhớ, tất cả các phiên bản.

Đối với bản thân mình, tôi chưa bao giờ tìm thấy một cách nào khác ngoài việc đặt hình ảnh và td trên cùng một dòng, nhưng tôi chưa bao giờ thực sự nhìn - có thể có một cách mà tôi đã bỏ lỡ. Đoán tôi chỉ có thói quen tinh giản họ.

Answer 4

Khi nó quay ra, loại bỏ các khoảng trắng là không cách duy nhất để sửa chữa nó. Mọi người khác có lẽ đã tìm ra điều này ngay bây giờ, nhưng tôi nghĩ tôi sẽ thêm nó ở đây để hoàn thành cho linh hồn nghèo tiếp theo tình cờ gặp vấn đề khó chịu này.

Về cơ bản, bạn không phải lo lắng về khoảng trống trong đánh dấu của mình. Thay vào đó, thêm style = "display: block;" vào thẻ img. Vì hình ảnh là các phần tử nội tuyến và bạn có khoảng trống trong đánh dấu của mình, IE thêm khoảng trống thừa vào cuối ô để tính khả năng văn bản với các số thập phân (ví dụ: g, y, p, v.v.). Đặt thẻ img để hiển thị dưới dạng phần tử khối sẽ thực hiện việc này. Không còn khoảng trắng xấu xí nữa!

Tín dụng đi đến anh chàng này: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, đó là nơi tôi tìm thấy câu trả lời. Đoán anh ấy đã nhận nó từ một nhóm thảo luận của google hoặc khác.

Hy vọng điều đó sẽ hữu ích!

Answer 5

Tôi đã khắc phục thêm này trước khi kết thúc bảng:

<tr> 
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td> 
</tr> 

Hope trợ giúp này.

Answer 6

Tôi đã thử tất cả các giải pháp trên:

a) thử display: block

b) loại bỏ không gian màu trắng trong các thẻ td (tức là tôi đã sử dụng tr và td thẻ mà không cần khoảng trắng Inbetween chúng)

.

c) tôi cố gắng sử dụng:

padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden; 

giải pháp a) làm việc. Giải pháp b) và c) không hoạt động trên IE.

Nhưng giải pháp tốt nhất tôi thấy là thế này:

Thêm một thuộc tính hspace=0 để tag ảnh. Ví dụ:

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" /> 

Điều này thực hiện thủ thuật.

Answer 7

Khác (và :) tốt nhất) Giải pháp là:

1. thiết lập td width/height đến hình ảnh chiều rộng/chiều cao với css
ảnh
2. thiết lập để nền cho td

Giống như:

<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td> 

Nó hoạt hình tôi :)

(xin lỗi cho tiếng Anh của tôi: ">)

Answer 8

Một phản hồi trễ khác, nhưng bạn cũng có thể sử dụng line-height: 0; để xóa khoảng trắng. Để đảm bảo rằng văn bản sẽ vẫn có thể đọc được, bạn có thể bọc nó trong một phần tử khác và sử dụng line-height: normal hoặc một giá trị khác do bạn chọn.

td * { line-height: normal; } 

Answer 9

Điều này đã khiến tôi mất nhiều thời gian - chuyển từ IE 8.0 sang IE 9.0 trên các trang mạng nội bộ - tất cả hình ảnh đột nhiên có một chút khoảng trắng bên dưới.

Hiển thị cài đặt: chặn hình ảnh đã làm cho tôi.

Answer 10

Tôi có vấn đề này quá với một trang web mạng nội bộ trên trình duyệt Internet Explorer, vì vậy tôi tắt chế độ xem tương thích cho các trang web mạng nội bộ để sửa chữa nó: