5

リンク、入力 (送信)、およびスパンを含む Web ページ。すべてが同じ外観になるようにスタイル設定されています。実際には、入力はハイパーリンクとスパンと同じ外観になるようにスタイル設定されています。

テスト済み: Firefox 3.0、3.6、4.0、14.0.1

何故か入力が他より少し大きい。また、入力のテキストは、リンクおよびスパンのテキストと整列しません。これがライブデモです。

http://jsfiddle.net/LGftW/

これが私のCSSです：

a{
    text-decoration:none;
}

input[type="submit"]{
    border:0 none;
    background:transparent;
}

a, input[type="submit"], span{
    border:solid 1px green;
    font-size:64px;
    font-family:Arial;
    font-weight:bold;
    float:left;
    padding:0;
    margin:0;
}

マークアップ:

<a href="#">LINK</a>
<input type="submit" value="INPUT" />
<span>SPAN</span>

では、入力を通常のリンクまたはスパンのように見せるにはどうすればよいでしょうか? ブラウザの動作がおかしいのでしょうか、それとも CSS を見逃しただけなのでしょうか? 私はこれを1日解決してきました。

編集

問題は Firefox でのみ発生するようです。IE8-9 と Chrome では正しく表示されます。

4

1 に答える 1

6

input::-moz-focus-innerCSS で次を使用して、Firefox のボタン パディングを削除します。

input::-moz-focus-inner /*Remove button padding in FF*/ 
{
    border: 0;
    padding: 0;
}

EDITED：上記のコードでデモリンクを更新しました。

firefox でデモを見る

于 2012-07-26T05:50:39.323 に答える