2009-06-11 8 views
1

IE6とIE7の次のコードでは、pタグの上部と下部の間に1つのピクセルギャップが作成されますが、FirefoxまたはIE8では生成されません。 powerset website に検索texboxを作成しようとしていて、IE6やIE7にバグがないほど魅力的です。私は間違って何をしていますか?pタグと入力タグの間に1ピクセルのギャップ

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

私は最初に行うことは、いくつかのタイプのCSSリセットを使用してからそこからスタイルを作成することです。それは、 "必要がある"すべてのデフォルトを効果的に設定するので、ブラウザの互換性が向上します。 これを確認してください:http://developer.yahoo.com/yui/reset/ – inkedmn

+0

oups申し訳ありませんが、実際には私が例を作成したときに忘れました – ak3nat0n

答えて

1

float:left;を入力#qに追加します。それは崩壊pを取得し、ギャップを取り除くでしょう。

+0

arrrghh!本当にありがとう! – ak3nat0n

関連する問題