All geek questions in one place

Firefox and Chrome add 2px bottom padding to table cell when there is an iframe cell in standard mode

I have been working on an intranet application that has been running quirks in all major browsers for many years. The goal was to make it work in standard mode without breaking anything so that we could use some jQuery packages. Anyway, my problem in Firefox and Chrome standard mode is adding a 2px bottom to the table cell when there is an iframe inside the cell. This does not happen in IE.

When I switch to quirks mode, the indentation is removed in Firefox and Chrome.
When I add a div instead of an iframe, the indentation is removed.
Setting the cellpadding and cellpacing tables to zero does not help.
The iframe src page is also in standard mode.

The following is a test case:

<!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>
+6
source share
2 answers

Add vertical-align: top to the iframe . The initial value of vertical-align is baseline .

iframe is an inline element. A problematic flaw is the space reserved for descenders in letters.

Additional information here: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

+8
source

I had a problem with the images at the bottom of the <td> from <table> . With Firefox, an additional 2px appeared, shown below the image. (IE was fine)

Anyway, I landed on this interesting page: (thirty published) https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

The image sits on the source text (apparently), and I added this tag to the image. Now everything is all right. Thank you

 style="display: block;"
0
source

Source: https://habr.com/ru/post/909291/

More articles:


All Articles