在 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>
|
<span id="myaccount">settings</span>
|
<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;
}
最佳答案
我也应该在此处包含 JavaScript 代码。我最终使用 Firefox 的 Firebug 浏览了该站点,并取消选择了页面上每个元素的某些属性,直到我注意到一个影响了 Safari 中 filters_area 部分对齐的属性。结果是 ul id“tab_list”从 jquery 文件中获取了 0.2em 的填充。这导致 Safari 强制 filters_area 不对齐,但对于 IE、Chrome 或 Firefox 来说不是问题。我删除了 0.2 em 的填充,Safari 工作正常。感谢所有建议的修复。他们帮助阐明了解决问题的最可行途径。
关于css div 在 Chrome (18) 和 Firefox (11) 中对齐,但在 Safari (5.1) 中不对齐。想不通为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10000806/