4

カスタムの背景画像を使用して送信ボタンのスタイルを設定しました。ただし、ブラウザによって表示が異なります。

ほとんどすべてのブラウザはそれが正しいことを示しています：

ここに画像の説明を入力してください

しかし、2では余分な高さがあります：

ここに画像の説明を入力してください

誰かが私のマークアップの何が悪いのか指摘できますか？

CSS：

input[type="submit"]{
    background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px  no-repeat;
    width:30px;
    height:30px;
    border:none;
    float:left;
    margin:30px 0 0;
    cursor:pointer;
}

HTML：

<form>
    <input type="text" class="placeholder" value="Search" />
    <input type="submit" value="" />
</form>

テスト済み：

  • IE8.0良い
  • IE7.0良い
  • iPhone良い
  • Chrome24.0良い
  • Firefox18.0.2良い
  • Safari 5.1（Mac OS X 10.7.1）良い
  • Opera 12.14（Windows 7 32ビット）良い
  • Safari 5.1.7（Windows 7 32ビット）エクストラハイト
  • Opera 11.51（Mac OS X 10.7.1）エクストラハイト

jsfiddleのライブデモ。

4

4 に答える 4

5

テキストボックスの高さは、送信ボタンとは異なります。テキストボックスの高さを設定してみてください。

于 2013-02-18T13:22:33.070 に答える
1

2番目の検索バーに表示されているように、テキストは斜体で少し小さく見えます。検索バーがテキストに合わせて小さくなり、検索アイコンが大きく表示されるようになっていると思います。

おそらくあなたがする必要があるのは、プレースホルダーが制御されるスタイルシートにこれを追加することです。

{font-style:normal}
于 2013-02-18T14:44:02.843 に答える
0

これを試して。要素に固定の高さを与えます。

input[type="text"]{
    margin:30px 0 0;
    width:226px;
    color:#999999;
    font-size:12px;
    font-style:italic;
    border:1px solid #cccccc;
    border-right:none;
    background-color:#ededed;
    float:left;
    height:28px;
    padding-right: 7px;
    padding-left: 7px;
    line-height: 28px;
}
于 2013-02-18T13:23:19.060 に答える
0

送信ボタンと入力テキストフィールドには、境界線、マージン、パディングなどのデフォルト値が異なります。まず、送信ボタンとテキストフィールドの両方にこれを配置する必要があります。

margin:0;
padding: 0;
border: none;
outline: none;
于 2014-05-21T01:52:21.363 に答える