표준 모드에서 iframe이 셀 내부에있을 때 파이어 폭스와 크롬이 테이블 셀에 2px 하단 패딩을 추가합니다.

필자는 모든 주요 브라우저에서 쿼크 모드로 작업해온 인트라넷 애플리케이션에서 일하고있었습니다. 목표는 아무것도 깨지 않고 표준 모드에서 작동하도록 만들어서 일부 jQuery 패키지를 사용할 수있게하는 것이 었습니다. 어쨌든 내 문제는 표준 모드입니다. Firefox와 Chrome은 셀 내부에 iframe이있을 때 테이블 셀에 2px 아래쪽 패딩을 추가합니다. 이것은 IE에서 발생하지 않습니다.표준 모드에서 iframe이 셀 내부에있을 때 파이어 폭스와 크롬이 테이블 셀에 2px 하단 패딩을 추가합니다.

quirks 모드로 전환하면 Firefox와 Chrome에서 패딩이 사라집니다.
iframe 대신 div를 추가하면 패딩이 사라집니다.
테이블 cellpadding 및 cellspacing을 0으로 설정하는 것이 도움이되지 않습니다.
iframe src 페이지도 표준 모드입니다.

<!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>

출처

2012-02-24 icramc

이 iframe에 vertical-align: top 추가 : 당신이 볼 수 있도록 여기

는 테스트 케이스이다. vertical-align의 초기 값은 baseline입니다.

iframe은 인라인 요소입니다. 문제가되는 틈은 문자로 descenders에 예약 된 공간입니다. 여기

더 많은 정보 : https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

출처

2012-02-24 18:34:25 thirtydot

내 문제가 해결되었습니다. 나는 이것을 위해 몇 시간을 보냈다. 무리 감사. – icramc

가 나는 <table>의 바닥 <td>의 이미지와이 문제를 가지고 있었다. Firefox의 경우 이미지 아래에 추가 2px이 표시되었습니다. (thirtydot에 의해 게시 된) 이미지는 (분명히) 텍스트의 baseline에 앉아 https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

나는 이미지에이 태그를 추가 :

어쨌든, 나는이 흥미로운 페이지에 착륙 (IE 괜찮습니다). 이제는 괜찮습니다. 감사 !

style="display: block;"

출처

2012-06-09 13:28:24 Max

표준 모드에서 iframe이 셀 내부에있을 때 파이어 폭스와 크롬이 테이블 셀에 2px 하단 패딩을 추가합니다.

답변

관련 문제