0

float: left; を使用しています。フロート: 右; 2 つの div コンテナーを 1 行に配置するには、左のコンテナーに入力バーを保持し、右のコンテナーに小さな背景画像 (検索ボタン) を保持します。

Opera と Firefox、MSIE 9.0+ では問題なく表示されますが、クロムで表示すると、右のコンテナの背景画像の位置がわずかにずれています (数ピクセル下にずれています)。

問題を強調するために背景色を赤に設定しました: スクリーンショット

index.php の抜粋:

<div class="header_inner_right">
    <form id="search_bar" method="post" action="" onsubmit="return checkSearchQuery();">
            <div class="left">
                <input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer" 
                    onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
            </div>
            <div class="right">
                <input id="search_button" src="images/search_button.gif" type="submit" value="">
            </div>
    </form>
</div>

index_chrome.css (php スクリプトが chrome ブラウザーを検出する場合に使用):

@charset "ISO-8859-1";

#search_bar {
    width: 450px;
    height: 37px;
    background-color: red
}

#search_bar #search_field {
    border: 0px;
    width: 365px;
    height: 37px;
    padding-left: 20px;
    padding-right: 20px;
    background-image: url(../images/search_field.gif);
    background-repeat: no-repeat;
    font-weight: bold;
    color: #c0c0c0;
    background-color: #ffffff
}

#search_bar #search_button {
    cursor: pointer;
    border: 0px;
    outline: none;
    height: 37px;
    width: 45px;
    background-image: url(../images/search_button.gif);
    background-repeat: no-repeat
}

それを修正し、虫眼鏡の背景画像の y 位置を調整して、左側の div の背景画像と完全に位置合わせし、右側の div コンテナーの赤い背景を完全に隠すにはどうすればよいですか?

編集: http://jsfiddle.net/YcraM/

すみません、JSFiddle を忘れていました!

4

3 に答える 3

1

これはあなたが聞きたい答えではないかもしれませんが、ほとんどの入力要素をブラウザ間で同じように見せることはほとんど不可能です。要素から送信ボタンを作成することをお勧めしますdiv。例：

<div class="left">
    <input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer" 
        onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
    <div id="search_button"></div>
</div>

好みに合わせてcssでdivのスタイルを設定します-:hoverと:active疑似クラスを使用することを忘れないでください。次に、たとえばjQueryを使用して、次のように機能させます。

$('#search_button').on('click', function(e) {
    $(e.currentTarget).closest('form').submit();
});
于 2012-08-26T03:23:14.760 に答える
0

に追加float:right(または左)#search_bar #search_buttonすると、問題も解決します

于 2012-08-26T03:42:02.457 に答える
0

Chrome 21 と FF 14 でテストしましたが、設定line-height:0px;で問題が解決したようです。

div.right {
    float: right;
    line-height:0px;
}    
div.left {
    float: left;
    line-height:0px;
}

http://jsfiddle.net/YcraM/3/

他のブラウザではテストしていないので、これが最善の解決策でない場合はご容赦ください。

于 2012-08-26T03:30:53.980 に答える