<input type="text">（ブラウザ間でplaceholderをサポートする）にテキストをオーバーレイしようとしています。私は、padding: 0;を設定することで取り除くことのできない何らかのパディングのために、私のポジショニングが常に2ピクセルずつずれていることを発見しました。提案hereとhereは問題を解決しません。テキスト入力に余分な埋め込みがあるのはなぜですか？
あなたは青のハイライトと黄色の枠の間に空白として、Chromeから次のスクリーンショットでは、このパディングを見ることができます：
どのように私はa）は、このスペースを削除することができます。またはb）Javascriptを使ってそれを測定するか？
あなた自身でデフォルトの国境を交換した場合、パディングは（クローム/ Mac上で、少なくとも私にとっては）消える：
これは私が使用したCSSです：
input {
padding: 0;
outline: none;
border: 1px solid red;
}
これはChrome 29.0.1547.57で動作します。その理由は、Chromeはデフォルトで2ピクセルの挿入境界に設定されているため、余分なピクセル間隔を持つ単一ピクセルの堅実な境界線のように見えるという効果があります。 –
Fantastic！これはChrome、Firefox（最初は大丈夫だった）、Safari、IE8と9の最新バージョンでは動作しますが、OperaやIE10では動作しません。どんな考え？ –
@ ''あなたはパディングもマージンもリセットしましたか？ボーダーボックスモデルを設定しようとしましたか？ – bfavaretto
すべてをリセットする必要があります。したがって、次のように使用することをお勧めします。
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
希望することをお勧めします。
これはうまくいきませんが、一般にこのような問題の良い解決策です。 –
CSSをリセットしましたか？ – j08691
完全なCSSリセット（ほとんどの場合は不要）を処理したくない場合は、[Normalize.css]（http://necolas.github.io/normalize.css/） 。 – mc10