0

次のような検索フォームがあります。

ここに画像の説明を入力

これはHTMLです：

<form method="post" action="#" class="search-form">
    <input type="text" class="nav-search-input input-initial" data-initial='Search' value="Search">
    <input type="submit" class="nav-search-submit" value="&#57384;"><!-- &#57384; is the code for the Glyphicons search icon -->
</form>

Bootstrap および Bootstrap Responsive スタイルと、検索フォームに次のスタイルを使用しています。

.search-form{
    display: block;
    margin: 0;
}

input.nav-search-input,
input.nav-search-submit{
    color: #eeeeee;
    background-color: #181818;

    border-top: 1px solid #303030;
    border-bottom: 1px solid #303030;
}

input.nav-search-input{
    width: 90px;
    height: 20px;

    -moz-transition:border-color 75ms;
    -o-transition:border-color 75ms;
    -webkit-transition:border-color 75ms;

    outline: 0!important;
    -webkit-appearance:none!important;
    box-shadow: none!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    margin-top: 10px;

    padding: 0px 0px 0px 8px;

    line-height: normal;
    font-weight: normal;
    font-size: 14px;

    border-right: none;
    border-left: 1px solid #303030;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;


    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;

    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;

}

input.nav-search-submit{
    font-family: Glyphicons;

    box-sizing: content-box;

    padding: 0px 6px 0px 5px;

    color: #aaaaaa;

    -moz-transition:border-color 75ms;
    -o-transition:border-color 75ms;
    -webkit-transition:border-color 75ms;

    border-left: none;
    border-right: 1px solid #303030;

    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;

    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}

これは Chrome、Firefox、および Safari でうまく機能しますが、Opera は次のようにフォームをレンダリングしています。

ここに画像の説明を入力

問題の Opera のバージョンは 12.02 です。

パディングに問題があるようです。この質問にリストされている解決策を試してみましたが、役に立ちませんでした。Opera で正しく見えるように上下のパディングを増やすと、他のブラウザでは正しく見えなくなります。

これはページの作業バージョンです。

ちなみに、私は Mac を使用しているため、IE ではテストしていません。

4

2 に答える 2

1

いくつかの考え：

  1. 虫めがねを作成するためにフォントに頼っています...それは危険です。一部のデバイスは @face フォントをサポートしていません (Glyphicons を Droid Sans に置き換えると、一部のユーザーが何を得ようとしているのかがわかります - パディングは問題になりません)。

  2. 使ってみましたか？<input type="image"...>

  3. 使ってみましたか{ background:url('mag-glass') }

Opera がそのフォントをどのようにレンダリングしているか、またはそのフォントの行の高さに問題があることを示す 50 ドルを受け取りました。そうです -- Opera でこれを修正すると、FF、Chrome、および Safari がジャックされます。

また、あなたの CSS ファイルを調べてみましたが、CSS のリセットは見られませんでした。詳しくは、Eric Meyer の CSS リセットを参照してください。リセットですべてが「均等化」されたときの小さな頭痛の多くを取り除きます。

于 2012-12-26T05:43:18.057 に答える