数週間前にはすべてのブラウザー (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" />
<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" />
<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>
次のようになります。
私が考えることができる唯一のことは、フィドルには別のリセットか何かがあるということです。