css divはChrome（18）とFirefox（11）で整列できますが、Safari（5.1）では整列しません。理由がわからない

Question

FirefoxとChromeでは、 "filters_area" divはブラウザウィンドウの左側に合わせて "tabs" divの下に正しく左揃えで表示されます。 Safariでは、 "filters_area" divは "tabs" divの右端に左揃えされています。このdivがSafariで異なった位置に配置される理由は何ですか？ここにコードがあります。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> 
<ul id="tab_list" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"> 
<span id="Items">Items</span> 
</li> 
<span id="tab_options"> 
<span id="help_link" href="#help">help</span> 
&nbsp;|&nbsp; 
<span id="myaccount">settings</span> 
&nbsp;|&nbsp; 
<a href="logout">log out</a> 
</span> 
</ul> 
</div> 
<div id="instructions_area"> 
<input id="search_box" type="text" value="Search..." name="search"> 
<div id="filters_area"> 
<span id="Everything" class="filter active_filter">On Hand</span> 
</div> 
</div> 

CSS

#tabs { 
border  : 0px; 
height  : 34px; 
} 

#tab_list { 
border  : 0px; 
display  : block; 
} 

#instructions_area { 
background : #FFF url('../images/products_top.png') repeat-x ; 
height  : 40px; 
line-height : 32px; 
padding-left: 10px; 
} 

#filters_area { 
color  : #555; 
height  : 40px; 
font-size : 14px; 
float  : left; 
line-height : 32px; 
} 

#search_box { 
border  : 1px solid #AAEE22; 
color  : #390; 
height  : 18px; 
float  : right; 
font-size : 12px; 
font-weight : bold; 
margin  : 4px 10px 0px 0px; 
width  : 175px; 
} 

Answer 1

私も、私は1つに気づいまで..私は最終的にFirefox用のFirebugを使用してサイトを経て、ページ上のすべての要素の特定の属性を選択解除ここでは、JavaScriptのコードが含まれている必要がありますSafariのfilters_areaセクションの配置に影響を与えました。 ul id "tab_list"がjqueryファイルから0.2emのパディングを取得していたことがわかります。これにより、Safariでfilters_areaの調整が強制的に行われましたが、IE、Chrome、Firefoxでは問題ありませんでした。私は0.2 emパディングを削除し、Safariは正常に動作します。提案されているすべての修正プログラムを評価してください。彼らは、解決のために最も実行可能な道筋を明らかにしました。

Answer 2

私の推測では、矛盾が<inputに起因するだろう。それは終了されません。

試してみてください。

<input id="search_box" type="text" value="Search..." name="search" />