<input type = "text">の余分な埋め込み

すべてのブラウザで、<input type="text">の中にいくつかの魔法のハードコーディングされたパディングが追加されているようです。いくつかのブラウザ（IE、Safari、Chrome）は、入力ボックスのサイズを少し高くしますが、通常のHTML要素のように適切に上揃えします。私は余分な高さで生きることができます。しかし、一部のブラウザは誤動作し（FirefoxとOpera）、テキストを縦に並べたり、余分な余白を追加したりしようとします。現代のブラウザでは、HTMLと同じようにテキストボックスをレイアウトしたり、魔法の書式を追加することはできません。私は何か間違っているのですか？私はいくつかのトリックを逃していますか？彼らは私を助けるいくつかの独自のCSSプロパティですか？私は簡単にFirefoxのCSSのドキュメントを見ましたが、私は何も見つけることができませんでした。代わりに、<input type="text">の代わりに編集可能なHTMLを使用することもできます。ここで<input type = "text">の余分な埋め込み

は、問題を示し抜粋です：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

    <title>Test</title> 

    <style type="text/css"> 

     body, input { 
      font-family: sans-serif; 
      font-size: 16pt; 
      color: White; } 

     #textbox { 
      position: absolute; 
      left: 20px; 
      top: 20px; 
      width: 100px; 
      background-color: #A5C9E2; 
      line-height: 16pt; 
      padding: 0px; 
      margin: 0px; 
      border-width: 0px; } 

     #box { 
      position: absolute; 
      left: 120px; 
      top: 20px; 
      width: 100px; 
      background-color: #AFD66A; 
      line-height: 16pt; } 

    </style> 

</head> 
<body> 

    <input type="text" id="textbox" value="Hello"> 

    <div id="box">Hello</div> 

</body> 
</html>

は編集：私は（念のため）Firefoxで-moz-outlineと-moz-box-sizingで少し実験したが、それらの値はいずれも、余分なパディングを削除しません。

出典

2009-12-04 Jan Zich

入力を閉じることから始めてください。.... = "Hello" /> – joshcomley

XHTMLを使用していないので、本当に有効です。 –

私はそれがHTML 4.01 Transitionalで有効だと信じていますが、確かに問題ではありません。 –

ラインハイトとフォントサイズの値を20pxに変更し、Firebugで要素を検査して実験しました。 clientHeightプロパティとoffsetHeightプロパティは両方とも24pxです（ただし、これらのプロパティには要素上のパディングセットが含まれているため、ブラウザが要素の高さを拡張しているか、パディングを追加しているかわかりません）。

入力の高さを線の高さと同じにすると明示的に設定されます。つまり、line-height: 16pt; height: 16pt;ですが、入力内のテキストの垂直位置変更されません。

出典

2009-12-04 13:23:03

入力のボックスサイズを変更することにより、この余分なパディングを排除できます。

-moz-box-sizing: content-box; 
-webkit-box-sizing: content-box; 
box-sizing: content-box;

これは、最新のブラウザを同じように動作させます。特にIEをターゲットにする必要があるかもしれません。

出典

2010-08-02 21:00:40 jessebeach

私はこれを 'input [type = "search"] 'とFirefoxの" padding "の1ピクセルがまだ残っているようです。 –

<input type = "text">の余分な埋め込み

答えて

関連する問題