2

数週間前にはすべてのブラウザー (Chrome、FF、IE7/8/9、Opera) で機能していた検索ボックスとボタンがありますが、現在は Chrome のみで少しずれています。

ここにChromeがあります ここに画像の説明を入力

そして、これはOpera、FF、IEにあります ここに画像の説明を入力

Chrome のわずかなオフセットに注意してください。この検索ボックスの HTML は次のとおりです。

<form id="function_search_form" method="post" class="span-24 textcenter last">
    <input type="text" name="basic_search_input" id="basic_search_input" />
    <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp;

    <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a>
    <input type="hidden" name="search_type" value="basic" />
    <div id="autocomplete_choices" class="autocomplete"></div>
</form>

これらの要素の CSS は次のとおりです。

#function_search_form #basic_search_button {
    border: 1px solid #FFFFFF;
    border-radius: 0px 4px 4px 0px;
    background: #FFFFFF;
    vertical-align: middle;
    height: 25px;
    width: 27px;
    margin: 0.5em 0px;
    padding: 1px 0px;
}

#function_search_form #basic_search_input {
    border: 1px solid #FFFFFF;
    border-radius: 4px 0px 0px 4px;
    color: #050;
    font: bold 12px 'trebuchet ms', helvetica, sans-serif;
    width: 250px;
    height: 25px;
    padding-right: 5px;
    vertical-align: middle;
}

入力を div でラップし、絶対位置または相対位置を使用しようとしました。ただし、変更したものはすべて他のブラウザーで壊れますが、Chrome では修正されます。Chromeで修正するテキスト入力から垂直方向に整列させると、それもあるようです。

これが Chrome の最新バージョンで導入された新しいバグであるかどうかはわかりませんが、これは以前 Chrome で機能していたことを覚えており、それ以降は何も変わっていません。

STEVE CAMPBELL のソリューションの更新

CSSファイルとこのHTML以外のすべてを取り出すと、

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body>
    <form id="function_search_form" method="post" class="span-24 textcenter last">
        <input type="text" name="basic_search_input" id="basic_search_input" />
        <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp;
        <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a>
        <input type="hidden" name="search_type" value="basic" />
        <div id="autocomplete_choices" class="autocomplete"></div>
    </form>
</body>
</html>

次のようになります。

ここに画像の説明を入力

私が考えることができる唯一のことは、フィドルには別のリセットか何かがあるということです。

4

1 に答える 1

2

このフィドルは私にとってはうまくいきます。相対および絶対を使用してスタイルを設定し、ボックスのサイズを微調整してブラウザ間の一貫性を確保し、em のマージンを削除しました。

#function_search_form
{
    position: relative;
}
#function_search_form #basic_search_button {
    border: 1px solid #FFFFFF;
    border-radius: 0px 4px 4px 0px;
    background: #FFFFFF;
    height: 25px;
    width: 27px;
    margin: 0;
    padding: 1px 0px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    position: absolute;
    top: 4px;
    left: 250px;
}

#function_search_form #basic_search_input {
    border: 1px solid #FFFFFF;
    border-radius: 4px 0px 0px 4px;
    color: #050;
    font: bold 12px 'trebuchet ms', helvetica, sans-serif;
    width: 250px;
    height: 25px;
    padding-right: 5px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;    
    position: absolute;
    top: 4px;    
}

#function_search_form a {
    position: absolute;
    top: 8px;    
    left: 280px;
}
于 2012-08-22T19:47:28.253 に答える