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間距問題？

回答

相關問題