テキスト入力のデフォルトスタイルは何ですか？

アンカータグとまったく同じに見えるように入力を変更しようとしていますが、テキストの開始前に何らかの理由で左端に1/2ピクセルの隙間があります。上に1/2pxの隙間があります。テキスト入力のデフォルトスタイルは何ですか？

これらのギャップはどこから来ているのですか？

（パディング、マージン、境界線は削除しました）

サファリとfirefoxとまったく同じ問題です。

出典

2011-09-17 Jai

なぜ入力タグをアンカータグのように見せたいのか不思議です。 –

私はタグと入力タグを切り替えるので、私は同じ位置にしたい。 – Jai

ハーフピクセルのギャップがあります..？ –

ここで私は<input type="button" />は、サファリ、クロム、およびIEは、以下のすべてにかなりよく協力しているように見える

example jsfiddle

<a>要素と同じ見せることに思い付くことが最高です：

：（私は6.0.1を使用しています）

input[type="button"], a { 
    margin:0; 
    padding:0; 
    border:0; 
    cursor:pointer; 
    font:12px/15px Helvetica, Arial, sans-serif; 
    color:blue; 
    text-decoration:underline; 
}

しかしFirefoxはもう少し技巧を必要と

この-moz-focus-innerはborderとpaddingの両方が内部ブラウザのスタイルシート（後藤リソース：スタイルシートを参照するにはFFで//gre-resources/forms.css）に設定され、要素の周りの余分なスペースのための犯人であるように思われます

Firefoxはまだテキストの上に余分な1ピクセルを作成していましたが、ボタンやアンカーを切り替えても行の高さの変更はありませんでしたが、親のdivが高さを変更しなかった要素を切り替えるときにこの1pxに設定します。

出典

2011-09-17 21:22:06 MikeM

ここの主な原因は私でした！うわー、私は間違って中心にテキストの揃えを設定したが、スペースが小さかったので気づかなかった！しかし、私は内側の焦点にそのメモ、それは上部のギャップを解決していただきありがとうございます。ありがとうございました！ – Jai

まあ、テキスト入力などのhtml要素のデファイルスタイルは、ブラウザごとに異なります。すべてのブラウザで同じものに見えるようにするには、CSS内のすべてのものをオーバーライドする必要があります。主要なブラウザのそれぞれには、ページ内の要素を右クリックすると、物事が持つCSSプロパティを正確に示す「inspect」オプションが用意されています。クロムとサファリのために、これはそれを構築しています。 firefoxの場合は、firebugプラグインをインストールします。 ie8の場合は、devツールバーをインストールしてください。

出典

2011-09-17 17:05:22

テキスト入力のデフォルトスタイルは何ですか？

答えて

関連する問題