Safari的CSS间距问题？

我为我的最新项目制作了一个基于列表的导航栏，并且我在导航的每一面都添加了两个信息栏。它在Firefox和IE中按照自己的意愿出现，但奇怪的是Safari正在发挥作用。它在导航栏和右侧信息栏之间留出很大的空间。Safari的CSS间距问题？

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>

我一直在此战斗小时，是新的CSS我希望有人在那里可以给我一只手！任何建议表示赞赏！谢谢:)

克里斯

编辑：我的文档类型是过渡性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

对不起

编辑 -----------

我改变了全部单位以像素为单位，但问题仍在呈现中。现在，在我的MacBook Safari浏览器上看起来很好，但在我的电脑上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

任何帮助表示赞赏！

来源

2009-04-08 Chris Bier

您的实际网站是否指定了文档类型？（如果没有，你应该考虑加一个来获得基于标准的渲染） – scunliffe 2009-04-08 20:00:33

请包括文档类型 – inspite 2009-04-08 20:02:08

我的doctype被指定它是<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http：/ /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> – 2009-04-08 20:37:39

根据您链接到的网站的状态，您似乎已经做了一些调整，但它仍然无法在不同的浏览器中正常工作。

我认为最好的方法是设置phonebg.gif的图像作为整个#menubar DIV的背景下，而不是在它的左边和右边部分，然后添加在#nav白色背景。

这样你就不必在右边的div上设置一个宽度（或者至少不需要精确到能确保3个部分与全部宽度匹配的宽度）。

来源

2009-04-08 22:53:22 mercator

我还没有得到Safari浏览器，所以我无法测试，（虽然我使用的是Chrome），但该问题可能是从

#phonebar { 
    padding: 0px 6px 9px 6px; 
    width:15%; 
} 

#asseenbar{ 
    padding: 0px 9px 9px 6px; 
    width:19.7em; 
} 

#nav li { 
    margin: 3px 3px 0px 0px; 
    border:3px double; 
} 

#nav a { 
    padding: 5px 15px 5px 15px; 
}

尝试使用统一的单位来（即尝试所有像素，如果你感觉很勇敢的话，你可以用％来搞定），并确保列的宽度总和 - 不超过容器div的宽度#menubar。

另外你应该指定一个DOCTYPE或者你会在不同的浏览器之间得到问题。如果您没有正确声明特定的docType，则访问者浏览器必须“猜测”（通常通过应用最宽松的可能docType或它自己的“quirks”模式docType）导致渲染速度较慢。

如果你没有指定DOCTYPE，你可能会遇到很多麻烦。

来源

2009-04-08 20:09:35 inspite

我不想设置固定宽度，因此它可以灵活。我如何衡量用ems或％填充1000px导航栏，如果我想让它变得灵活？我正试图在导航栏中保留3px的边框。如果我设置得太高，它不会工作。 www.christopherbier.com/gbg是该网站。谢谢！ – 2009-04-08 20:27:54

尝试在列表中添加一个div。

来源

2009-04-08 20:43:20 Jamie

Safari的CSS间距问题？

回答

相关问题