p 태그와 입력 태그 사이에 하나의 픽셀 갭

IE6과 IE7의 다음 코드에서 p 태그의 상단과 하단 사이에 하나의 픽셀 간격이 생기지 만 Firefox 또는 IE8에서는 보이지 않는 이유는 무엇입니까? 나는 powerset website 에 검색 texbox를 만들려고 노력하고 있고 IE6이나 IE7에는 버그가 없다는 것을 충분히 알고있다. 내가 도대체 뭘 잘못하고있는 겁니까?p 태그와 입력 태그 사이에 하나의 픽셀 갭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #sbox 
      { 
       overflow: hidden; 
      } 
      #sbox p 
      { 
       /*border:1px solid #dae7fa; */ 
       float:left; 
       display: block; 
       border: 1px solid red; 
       width: 208px; 
       padding: 0; 
      } 
      input#q 
      { 
       font-size: 11px; 
       padding: 3px; 
       border: 1px solid blue; 
       width: 200px; 
       color: #999999; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="sbox"> 
      <p> 
       <input id="q" type="text" value="Search..." /> 
      </p> 
     </div> 
    </body> 
    </html>

출처

2009-06-11 ak3nat0n

내가 할 수있는 첫 번째 일은 CSS 리셋의 일부 유형을 사용하고 그 다음 스타일을 사용하는 것입니다.이 방법은 "기본 설정"이되어야하는 모든 기본값을 효과적으로 설정하므로 더 큰 브라우저 호환성을 제공합니다. 체크 아웃 : http://developer.yahoo.com/yui/reset/ – inkedmn

oups 죄송합니다. 실제로 사례를 만들었을 때 잊어 버렸습니다. – ak3nat0n

입력 # q에 float:left;을 추가하십시오. 그러면 붕괴 p가 생겨 격차가 없어집니다.

출처

2009-06-11 21:23:23 Emily

arrrghh! 무리 감사! – ak3nat0n

p 태그와 입력 태그 사이에 하나의 픽셀 갭

답변

관련 문제