0

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;
}
4

1 に答える 1

0

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

于 2012-04-07T21:00:31.460 に答える