0

当面の問題で簡単なjsfiddleをセットアップしました。

http://jsfiddle.net/Gdnbe/

結果ペインを広げると、すべてがインラインで表示されていることがわかります。

Firefox で見ると、「ログイン」というテキストを含め、すべてが適切に並んでいるように見えます (ボタンの画像の高さは入力よりも長いですが、垂直方向の中央に配置する必要があります)。

ただし、クロムでは、ボタンのテキストがボタンの下部に移動し、ボタンが入力とインラインでうまく収まらず、高すぎます。

問題のコード:

<input name="submit" value="Log in" style="background: url(' http://www..../images/btn-bg.png') no-repeat scroll 0 0 transparent;
    border: none;
    /*border-radius: 0.4em 0.4em 0.4em 0.4em;*/
    color: #999999;
    padding: 0.7em 0.8em 1.1em;
    margin-left: 20px;
    height: 35px;
    width: 146px;
    cursor:pointer;
    color:#fff;" type="submit">

このクロスブラウザ互換性を実現するための次のステップは何ですか?

4

1 に答える 1

0

問題はボタンのパディングです。それを削除すると、問題はなくなります。

http://jsfiddle.net/Gdnbe/1/

Just look at the fiddle (stupid "Links to jsfiddle must be accompanied by code" rule)

背景画像の使用に固執したい場合は、これが最善の方法です。すべての要素を完璧に整列させたい場合は、CSS3 のいくつかの機能を使用することを検討してください。

  • 境界半径
  • 線形勾配
  • ボックスシャドウ
于 2013-02-24T14:12:36.553 に答える