另一個Safari瀏覽器的寬度與問題CSS

Question

我作出這個網站http://www.christopherbier.com/gbg/locations.html

在Mac上的Safari內容DIV的寬度大於它是在其他瀏覽器。它與右側欄位重疊。我不知道如何解決這個問題。這裏是我的CSS：

#mainwrap { 
    width:1000px; 
    margin-right:auto; 
    margin-left:auto; 
    background-color:#f0f0f0; 
    min-height:200px; 
} 
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; 
} 

a{ 
    color:#335b83; 
} 
#nav { 
    float:left; 
    padding: 0px 0px 0px 3px; 
    margin: 0px 0px 0px 0px; 
    list-style:none; 
    border:0px solid #000; 
    background-color:#FFF; 
} 

#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:2em; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    display: inline; 
    font-family:Georgia, "Times New Roman", Times, serif; 
} 

h3 { 
    font-size:1.5em; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    display: inline; 
    color:#335b83; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    border-bottom: 1px; 
    border-bottom-color: #497caf; 
    border-bottom-style: dotted; 
    border-width: 80%; 
} 

h4 { 
    font-size:1.2em; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    display: inline; 
    color:#999; 
    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:left; 
    border:0px solid #000; 
    width:188px; 
    text-align:center; 
} 

#footer { 
    clear:both; 
    margin-right:auto; 
    margin-left:auto; 
} 

#footerpre{ 
background-image: url(images/footerpre.jpg); 
background-repeat:repeat-x; 
width: 1000px; 
height:73px; 
border: 0px solid #000; 
margin-top:0px; 
margin-bottom:0px; 
    margin-right:auto; 
    margin-left:auto; 
} 

#footerfin{ 
    background-image: url(images/footerfin.jpg); 
background-repeat:repeat-x; 
width: 1000px; 
margin-top:0px; 
    margin-right:auto; 
    margin-left:auto; 
} 

#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; 
    background-image:url(images/phonebg.gif); 
    background-repeat:repeat-x; 
    height:38px; 
} 

#content{ 
    margin-right:auto; 
    margin-left:auto; 
    background-color:#FFF; 
    width:772px; 
    min-height:400px; 
    float:left; 
    margin-bottom: 0px; 
    padding: 20px 5px 5px 20px; 
    border:0px solid #000; 
    color:#333; 
} 

    #gpbar { 
     float:right; 
     width:188px; 
     padding: 0px 9px 9px 6px; 
     min-height:400px; 
     background-color:#f0f0f0; 
    } 

和我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Georgia Buying Group</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="mainwrap"> 
<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="index.html">HOME</a></li> 
<li><a href="webuy.html">WHAT WE BUY</a></li> 
<li><a href="goldparty.html">GOLD PARTIES</a></li> 
<li><a href="aboutus.html">ABOUT US</a></li> 
<li><a href="locations.html">LOCATIONS</a></li> 
<li><a href="contact.html">CONTACT US</a></li> 
</ul> 
<div id="asseenbar"> 
<p id="asseen">Call or Stop By Today!</p> 
</div> 
</div> 
<div id="content"> 
    <h3>Our Locations 
    </h3><br /><br /> 
    <h2>Acworth </h2> 
    <h4> Cobb County</h4> 
    <br />3451 Cobb Parkway Suite 7 
    Acworth, GA, 30101 <a href="http://www.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=3451+Cobb+Parkway+Suite+7+Acworth,+GA,+30101+&amp;sll=37.0625,-95.677068&amp;sspn=33.710275,79.101563&amp;ie=UTF8&amp;ll=34.04889,-84.686136&amp;spn=0.008606,0.019312&amp;z=14&amp;iwloc=A">View Larger Map</a> 

<table cellpadding="5px"><tr> 
    <td valign="top" width="325"><iframe width="325" align="left" height="225" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=3451+Cobb+Parkway+Suite+7+Acworth,+GA,+30101+&amp;sll=37.0625,-95.677068&amp;sspn=33.710275,79.101563&amp;ie=UTF8&amp;ll=34.04889,-84.686136&amp;spn=0.008606,0.019312&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><img src="images/store.jpg" /></td><td width="317" valign="top"> 
    <u><b>Store Hours:</b></u><br /> 
    <table><tr><td bgcolor="#EBEBEB"><strong>Sunday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Monday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Tuesday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Wednesday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Thursday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Friday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Saturday</strong></td><td>10a - 6p</td></tr> 
    </table><br /> 
    <u><b>Phone:</b></u> <h2>888-325-1924</h2> 
    <br /> 
<br /> 
    <u><b>Servicing:</b></u> 
    <br /><h4> Acworth, Woodstock, Cartersville,<br /> Marietta, Kennesaw, Roswell,</h4><br />Alpharetta, Canton, Powder Springs, Smyrna, Sandy Springs, Atlanta, Rome, Ludyville, Rockmart, Lathentown, Sugar Valley</td></tr></table></div> 
    <div id="gpbar"></div> 
<div id="footer"><p id="footerpre"></p></div></div> 
</body> 
</html> 

Answer 1

我沒有MAC所以看不到，但有幾點：

你的XHTML是無效的。 center>不存在anyomre（並且在設計中實際上並不需要這些東西的外觀），你也可以指定px中任何標題圖片的尺寸。

不知道你爲什麼在主卷以外的任何地方使用margin auto。嘗試保證金：0;而不是

嘗試添加* {margin：0; padding：0}添加到樣式表的頂部，然後添加您以後需要的任何額外填充和邊距 - 這將在佈局時或多或少地將所有瀏覽器設置爲相同的起點。

，如果你不想要一個邊框使用{邊界：無}（如果你說的邊界：0像素固體;有些瀏覽器仍然會嘗試和借鑑的東西）

這可能不是解決問題，但它會朝着正確的方向邁進，因爲您的標記越容易被瀏覽器發現。

Answer 2

我沒有看到我的Safari 4測試版的複製問題，雖然我並不完全相信你會是什麼問題因爲右側的邊欄是空的，所以我不確定我是如何判斷它是否被重疊。也許你應該澄清你遇到的確切問題？

爲了調試問題，無論是自己解決還是問一個更具體的問題，您都應該嘗試將問題解決到查看問題所需的最小示例。刪除與問題無關的所有內容和結構，並確保問題仍然存在。刪除所有與問題無關的CSS，並確保問題仍然存在。那麼你應該有一個簡單的例子，每個HTML和CSS不超過10行。如果你將它剝離得足夠遠，你可能會在這個過程中發現你的問題（如果刪除一行CSS會導致你的問題消失，那麼你已經發現了問題），如果不是這樣，你會有別的東西可以給你提供更好的建議，而不必通過所有無關的代碼。

如果您仍然無法弄清楚發生了什麼問題，您應該嘗試在Safari中使用網絡檢查器。在Safari 4測試版中，您可以轉到「高級」首選項，然後選擇「在菜單欄中顯示開發菜單」。我不記得究竟是什麼時候引入了這種偏好設置，但在早期版本的Safari中，您應該能夠按照these instructions啓用檢查器。一旦你做完了，你應該可以右鍵點擊（如果你沒有鼠標右鍵，按住Control鍵點擊），然後選擇「檢查元素」，調出Web檢查器。在更新版本的Safari中，您還應該能夠從「開發」菜單中選擇「顯示Web Inspector」（Command-Option-I）。這會告訴你很多關於你的CSS的信息，以及這些元素的指標是如何工作的，這應該有助於你調試問題。