6

こんにちは、送信ボタンに 2 ピクセルの余分なパディングを追加する Firefox に問題があるようです。これを chrome と IE9 でテストしましたが、両方のブラウザでコードが正常にレンダリングされます。Firefox は、下部に 2 ピクセルのパディングを追加しているようです右上隅にキーの背景がある送信ボタン。ウェブサイトは次のとおりです。

www.thanathos.host22.com

これはサイトのコードです：

 <form method="post" action="index.html">
               <input type="text" value="Username"/>
               <input type="text" value="Password"/>
               <input type="submit" id="submit" value=""/>
               <img src="img/header/key.png" alt="" id="key"/>
      </form>

    header section form input{
        color:#b3aaaa;
        border:1px solid #cccccc;
        float: left;
        padding:5px 8px;
        margin-left: 6px;
    }

どうすればこれを修正できますか?

これに対する解決策がない場合は、入力テキストが入力送信と等しく、入力テキストが上から下の中央にあるという解決策を誰かに教えてもらえますか?

ここに画像の説明を入力

編集:別のコンピューターでこれを確認したところ、Firefox がこれを正しくレンダリングしているようです。同じブラウザーのバージョンが別のコンピューターでは少し異なる Web サイトを表示する前に、この種の問題に遭遇しました。前回、同様のことが chrome で発生しました。この問題を解決できます。

同じ画面サイズと解像度の異なるコンピューターで同じブラウザーがページを異なる方法でレンダリングする理由を知っている人はいますか?

4

2 に答える 2

22

こんな悩みを抱えていました。CSS次に、問題を解決するこのことを見つけました：

input::-moz-focus-inner { border:0; padding:0 }

この解決策は、このブログ投稿のコメントに記載されています。

防弾CSS入力ボタンの高さ

投稿にあるように: これは、Firefox (ユーザー エージェント) 独自のCSSスタイルが使用され、プロパティ!importantをオーバーライドしようとしても適用されないために発生します。CSS

于 2012-09-24T21:38:37.913 に答える
0

**便利だと思うのでここに残しておきます..**

いずれの場合も、ボタンだけにアクセスして、CSS をいじってみてください。

input[type="submit"] {
  padding-bottom: 3px;
}

編集

ボタンの上に画像を配置しているため、実際に送信ボタンをクリックするのが難しくなります。キーの上にマウスを置くと、ポインタに変化しない = クリックできないことがわかります。

image-tag を削除し、代わりに送信ボタンの背景として使用することをお勧めします。このようなもの：

input[type="submit"] {
  padding-bottom: 3px;
  background: url(path-to-image);
  border: none;
  height: "img-height";
  width: "img-width";
}

画像のサイズが正しい場合は、送信ボタンに何らかの背景が既にあるように見えるためです。背景とキー画像の両方を含む正しいサイズの画像を作成することをお勧めします (この最後の文が意味をなすことを願っています)。

もう 1 つの考えられる問題は、ボタンにテキストがないことですが、ボタンは css の前の方から lineheight/font-size を継承する必要があるため、submit-button がさらに拡張される可能性があります。font-size: 1px などを追加してみてください。

于 2012-09-05T19:20:56.893 に答える