2012-02-24 27 views
6

Tôi đang làm việc trên ứng dụng mạng nội bộ đã hoạt động trên chế độ quirks trong tất cả các trình duyệt chính trong nhiều năm. Mục đích là để làm cho nó hoạt động ở chế độ tiêu chuẩn mà không vi phạm bất cứ điều gì để chúng ta có thể sử dụng một số gói jQuery. Dù sao thì vấn đề của tôi là ở chế độ tiêu chuẩn Firefox và Chrome thêm phần đệm đáy 2px vào ô bảng khi có một khung nội tuyến bên trong ô. Điều này không xảy ra trong IE.Firefox và Chrome thêm đệm dưới 2px vào ô bảng khi có iframe bên trong ô ở chế độ chuẩn

Khi tôi chuyển sang chế độ quirks, vùng đệm sẽ biến mất trong Firefox và Chrome.
Khi tôi thêm div thay vì khung nội tuyến, vùng đệm sẽ biến mất.
Đặt ô bảng và khoảng cách ô thành 0 không giúp ích gì.
Trang iframe src cũng ở chế độ chuẩn.

Đây là một trường hợp thử nghiệm để bạn có thể thấy:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head><title>Test</title></head> 
<body style="background:#FFF;"> 
<table cellpadding="0" cellspacing="0" border="0"> 
     <tr> 
      <td id='browser_td' style='width:1000px; height:500px; margin:0px; padding:0px; background:#000; border-bottom:0px;'> 
        <iframe id='browser_iframe' name='browser_iframe' src="http://houston.craigslist.org/" width='1000' height='500' frameborder="0" hspace="0" vspace="0"></iframe> 
      </td> 
     </tr> 
</table> 
</body> 
</html> 

Trả lời

8

Thêm vertical-align: top để iframe. Giá trị ban đầu của vertical-alignbaseline.

iframe là phần tử nội tuyến. Khoảng cách có vấn đề là khoảng trống dành cho descenders bằng chữ cái.

biết thêm thông tin ở đây: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

+0

Điều này giải quyết được sự cố của tôi. Tôi đã dành hàng giờ cho việc này. Cảm ơn nhiều. – icramc

0

Tôi có vấn đề này với một hình ảnh ở dưới cùng <td> của một <table>. Với Firefox, có thêm 2px được hiển thị bên dưới hình ảnh. (IE là ok)

Dù sao, tôi hạ cánh trên trang này thú vị: (đăng bởi thirtydot) https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Hình ảnh đang ngồi trên cơ sở văn bản (rõ ràng) và tôi đã thêm thẻ này cho hình ảnh. Tất cả là tốt bây giờ. Cảm ơn !

style="display: block;" 
Các vấn đề liên quan