Safari的CSS间距问题？ [英] CSS spacing issues with Safari?
本文介绍了Safari的CSS间距问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我为我的最新项目制作了一个基于列表的导航栏，并在导航的每一侧添加了两个信息栏。它是根据需要在Firefox和IE中出来，但奇怪的是，Safari正在起作用。它在导航栏和右侧信息栏之间形成大的空间。
CSS
body {
background-color： ＃4c7094;
background-image：url（images / bg.gif）;
background-repeat：repeat-x;
font-size：.9em;
color：#FFF;
margin-top：0px;
font-family：Tahoma，Geneva，sans-serif;
}
#nav {
float：left;
padding：0px 0px 0px 3px;
margin：0px 0px 0px 0px;
list-style：none;
border：0px solid＃000;
}
#nav li {
float：left;
margin：3px 3px 0px 0px;
font-family：Tahoma，日内瓦，sans-serif;
background-color：＃e7ebf0;
border：3px double;
display：inline;
border-color：＃99aabb;
}
#nav a {
float：left;
display：block;
color：＃1d4c7b;
padding：5px 15px 5px 15px;
font-size：.8em;
vertical-align：middle;
text-decoration：none;
font-family：Georgia，Times New Roman，Times，serif;
}
#nav a：hover {
float：left;
display：block;
color：#FFF;
padding：5px 15px 5px 15px;
font-size：.8em;
background-color：＃5b7290;
vertical-align：middle;
text-decoration：none;
font-family：Georgia，Times New Roman，Times，serif;
}
#phonebar {
padding：0px 6px 9px 6px;
background-image：url（images / phonebg.gif）;
background-repeat：repeat-x;
background-color：＃335b83;
color：#FFF;
float：left;
border：0px solid＃000;
width：15％;
text-align：center;
}
#asseenbar {
padding：0px 9px 9px 6px;
margin-right：0px;
background-image：url（images / phonebg.gif）;
background-repeat：repeat-x;
background-color：＃335b83;
color：#FFF;
float：right;
display：inline;
border：0px solid＃000;
width：19.7em;
text-align：center;
}
h2 {
font-size：1.5em;
margin：0px 0px 0px 0px;
padding：0px 0px 0px 0px;
display：inline;
font-family：Georgia，Times New Roman，Times，serif;
}
#phone {
font-size：1em;
margin：0px 0px 0px 0px;
padding：8px 0px 0px 0px;
font-family：Times New Roman，Times，serif;
}
#asseen {
font-size：.8em;
margin：0px 0px 0px 0px;
padding：9px 0px 0px 5px;
text-align：left;
font-family：Times New Roman，Times，serif;
}
#menubar {
clear：left;
margin-bottom：0px;
width：1000px;
margin-left：auto;
margin-right：auto;
background-color：#FFF;
height：40px;
}
#content {
margin-right：auto;
margin-left：auto;
background-color：#FFF;
width：975px;
height：890px;
padding：20px 5px 5px 20px;
border：0px solid;
border-color：＃4c7094;
color：＃333;
}
HTML：
< body>
< center> < img src =images / banner.jpgwidth =1000height =72/>< / center>
< div id =menubar>
< div id =phonebar>
< p id =phone> 888-325-1924< / p>
< / div>
< ul id =nav>
< li>< a href =＃>首页< / a>< / li&
< li>< a href =＃>我们购买什么< / a>< / li>
< li>< a href =＃>关于我们< / a>< / li>
< li>< a href =＃> LOCATIONS< / a>< / li>
< li>< a href =＃>联系我们< / a>< / li&
< / ul>
< div id =asseenbar>
< p id =asseen>如CNN和NBC上所见< / p>
< / div>
< / div>
< div id =content>欢迎来到Georgia Buying Group< / div>
< / body>
我一直在努力工作几个小时，是新的CSS我希望有人在那里帮帮我！任何建议是赞赏！感谢：）
- Chris
：
我的doctype是过渡的：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
对不起
/ strong> -----------
我将所有单位改为像素，但问题仍然存在。现在看起来很好的safari在我的macbook，但不是在safari上我的电脑，或在firefox的事情。
这是我的CSS：
body {
background-color：＃4c7094;
background-image：url（images / bg.gif）;
background-repeat：repeat-x;
font-size：.9em;
color：#FFF;
margin-top：0px;
font-family：Tahoma，Geneva，sans-serif;
}
#nav {
float：left;
padding：0px 0px 0px 3px;
margin：0px 0px 0px 0px;
list-style：none;
border：0px solid＃000;
}
#nav li {
float：left;
margin：3px 3px 0px 0px;
font-family：Tahoma，Geneva，sans-serif;
background-color：＃e7ebf0;
border：3px double;
display：inline;
border-color：＃99aabb;
}
#nav a {
float：left;
display：block;
color：＃1d4c7b;
padding：5px 15px 5px 15px;
font-size：.8em;
vertical-align：middle;
text-decoration：none;
font-family：Georgia，Times New Roman，Times，serif;
}
#nav a：hover {
float：left;
display：block;
color：#FFF;
padding：5px 15px 5px 15px;
font-size：.8em;
background-color：＃5b7290;
vertical-align：middle;
text-decoration：none;
font-family：Georgia，Times New Roman，Times，serif;
}
h2 {
font-size：1.5em;
margin：0px 0px 0px 0px;
padding：0px 0px 0px 0px;
display：inline;
font-family：Georgia，Times New Roman，Times，serif;
}
#phonebar {
padding：0px 6px 9px 6px;
background-image：url（images / phonebg.gif）;
background-repeat：repeat-x;
background-color：＃335b83;
color：#FFF;
float：left;
border：0px solid＃000;
width：120px;
text-align：center;
}
#asseenbar {
padding：0px 9px 9px 6px;
margin-right：0px;
background-image：url（images / phonebg.gif）;
background-repeat：repeat-x;
background-color：＃335b83;
color：#FFF;
float：right;
display：inline;
border：0px solid＃000;
width：326px;
text-align：center;
}
#phone {
font-size：1em;
margin：0px 0px 0px 0px;
padding：8px 0px 0px 0px;
font-family：Times New Roman，Times，serif;
}
#asseen {
font-size：.8em;
margin：0px 0px 0px 0px;
padding：9px 0px 0px 5px;
text-align：left;
font-family：Times New Roman，Times，serif;
}
#menubar {
clear：left;
margin-bottom：0px;
width：1000px;
margin-left：auto;
margin-right：auto;
background-color：#FFF;
height：40px;
}
#content {
margin-right：auto;
margin-left：auto;
background-color：#FFF;
width：975px;
height：890px;
padding：20px 5px 5px 20px;
border：0px solid;
border-color：＃4c7094;
color：＃333;
}
可以在这里找到
http://www.christopherbier.com/gbg
$ b解决方案
你似乎已经做了一些调整，根据您所链接的网站的状态，但它仍然无法在不同的浏览器中正常工作。
我认为最好的赌注是设置 phonebg.gif 图像作为整个 #menubar div的背景，而不是在它的左边和右边部分，然后添加这样你就不必在右边的div上设置宽度了。 （或至少不是一个宽度需要如此精确，以确保3个部分完全匹配到全宽）。
I have made a list based navigation bar for my newest project and I have added two information bars on each side of the navigation. It is coming out as desired in Firefox and IE but oddly enough Safari is acting up. It is making a large space between the navigation bar and the right side information bar.
CSS
body{
background-color:#4c7094;
background-image: url(images/bg.gif);
background-repeat:repeat-x;
font-size:.9em;
color:#FFF;
margin-top:0px;
font-family: Tahoma, Geneva, sans-serif;
}
#nav {
float:left;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
list-style:none;
border:0px solid #000;
}
#nav li {
float:left;
margin: 3px 3px 0px 0px;
font-family:Tahoma, Geneva, sans-serif;
background-color:#e7ebf0;
border:3px double;
display: inline;
border-color:#99aabb;
}
#nav a {
float:left;
display: block;
color:#1d4c7b;
padding: 5px 15px 5px 15px;
font-size: .8em;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav a:hover {
float:left;
display: block;
color:#FFF;
padding: 5px 15px 5px 15px;
font-size: .8em;
background-color:#5b7290;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#phonebar{
padding: 0px 6px 9px 6px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:left;
border:0px solid #000;
width:15%;
text-align:center;
}
#asseenbar{
padding: 0px 9px 9px 6px;
margin-right: 0px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:right;
display:inline;
border:0px solid #000;
width:19.7em;
text-align:center;
}
h2 {
font-size:1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
font-family:Georgia, "Times New Roman", Times, serif;
}
#phone {
font-size:1em;
margin: 0px 0px 0px 0px;
padding: 8px 0px 0px 0px;
font-family:"Times New Roman", Times, serif;
}
#asseen {
font-size:.8em;
margin: 0px 0px 0px 0px;
padding: 9px 0px 0px 5px;
text-align:left;
font-family:"Times New Roman", Times, serif;
}
#menubar{
clear:left;
margin-bottom:0px;
width:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
height:40px;
}
#content{
margin-right:auto;
margin-left:auto;
background-color:#FFF;
width:975px;
height:890px;
padding: 20px 5px 5px 20px;
border:0px solid;
border-color:#4c7094;
color:#333;
}
HTML:
<body>
<center> <img src="images/banner.jpg" width="1000" height="72" /></center>
<div id="menubar">
<div id="phonebar">
<p id="phone">888-325-1924</p>
</div>
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">WHAT WE BUY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div id="asseenbar">
<p id="asseen">As seen on CNN and NBC</p>
</div>
</div>
<div id="content">Welcome to Georgia Buying Group</div>
</body>
I have been fighting with this for hours and being new to CSS I am hoping that someone out there can give me a hand! Any advice is appreciated! Thanks :)
- Chris
EDIT: My doctype is transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sorry
EDIT -----------
I changed all the units to pixels, but the issue is still being presented. Now it looks fine on safari on my macbook but not on safari on my pc, or in firefox for that matter. it is just expanding so much that it is pushed down one line.
Here is my CSS:
body{
background-color:#4c7094;
background-image: url(images/bg.gif);
background-repeat:repeat-x;
font-size:.9em;
color:#FFF;
margin-top:0px;
font-family: Tahoma, Geneva, sans-serif;
}
#nav {
float:left;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
list-style:none;
border:0px solid #000;
}
#nav li {
float:left;
margin: 3px 3px 0px 0px;
font-family:Tahoma, Geneva, sans-serif;
background-color:#e7ebf0;
border:3px double;
display: inline;
border-color:#99aabb;
}
#nav a {
float:left;
display: block;
color:#1d4c7b;
padding: 5px 15px 5px 15px;
font-size: .8em;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav a:hover {
float:left;
display: block;
color:#FFF;
padding: 5px 15px 5px 15px;
font-size: .8em;
background-color:#5b7290;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
h2 {
font-size:1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
font-family:Georgia, "Times New Roman", Times, serif;
}
#phonebar{
padding: 0px 6px 9px 6px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:left;
border:0px solid #000;
width:120px;
text-align:center;
}
#asseenbar{
padding: 0px 9px 9px 6px;
margin-right: 0px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:right;
display:inline;
border:0px solid #000;
width:326px;
text-align:center;
}
#phone {
font-size:1em;
margin: 0px 0px 0px 0px;
padding: 8px 0px 0px 0px;
font-family:"Times New Roman", Times, serif;
}
#asseen {
font-size:.8em;
margin: 0px 0px 0px 0px;
padding: 9px 0px 0px 5px;
text-align:left;
font-family:"Times New Roman", Times, serif;
}
#menubar{
clear:left;
margin-bottom:0px;
width:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
height:40px;
}
#content{
margin-right:auto;
margin-left:auto;
background-color:#FFF;
width:975px;
height:890px;
padding: 20px 5px 5px 20px;
border:0px solid;
border-color:#4c7094;
color:#333;
}
It can be found here;
http://www.christopherbier.com/gbg
Any help is appreciated!!!
解决方案
You seem to have made some adjustments already, based on the state of that site you linked to, but it's still not working properly across different browsers.
I think your best bet is to set that phonebg.gif image as a background on the entire #menubar div, instead of on the left and right parts of it, and then add a white background on the #nav.
That way you won't have to set a width on that right div at all (or at least not a width that needs to be so precise as to make sure the 3 parts exacty match up to the full width).
这篇关于Safari的CSS间距问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
