CSS 的另一个 Safari 宽度问题答案

【问题标题】：Another Safari width issue with CSSCSS 的另一个 Safari 宽度问题
【发布时间】：2010-10-18 15:24:18
【问题描述】：

我正在制作这个网站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>

【问题讨论】：

标签： html css safari cross-browser

【解决方案1】：

我没有mac所以看不到，但有几点：

您的 xhtml 无效。 center> 不再存在（从外观上看，设计中实际上并不需要），您还应该以 px 指定任何标题图像的尺寸。

不知道您为什么要在除 mainwrap 之外的任何东西上使用自动边距。尝试保证金：0；而是

尝试添加 * {margin:0; padding:0} 到样式表的顶部，然后添加您以后需要的任何额外的填充和边距 - 这或多或少会在布局方面将所有浏览器设置为相同的起点。

如果您不想要边框，请使用 {border:none}（如果您说边框：0px 实心；某些浏览器仍会尝试绘制一些东西）

这可能无法解决问题，但它将朝着正确的方向迈出一步，因为您的标记越多valid 浏览器就越容易找到它来呈现。

【讨论】：

【解决方案2】：

我在我的 Safari 4 beta 副本中没有看到问题，但我不确定您会遇到什么问题，因为右侧的侧边栏是空的，所以我不确定我怎么知道如果它被重叠。也许您应该澄清一下您遇到的确切问题？

为了调试问题，或者自己解决问题或提出更具体的问题，您应该尝试将问题简化为查看问题所需的最小示例。删除所有与问题无关的内容和结构，并确保问题仍然存在。删除所有与问题无关的 CSS，并确保问题仍然存在。然后你应该有一个简单的例子，每个 HTML 和 CSS 不超过 10 行。如果你把它剥离得足够远，你可能会在这个过程中发现你的问题（如果删除 CSS 的其中一行让你的问题消失，那么你已经找到了问题），如果不是这样，你会有一些其他人可以给你更好的建议，而不必费力地阅读所有无关的代码。

如果您仍然无法找出问题所在，您应该尝试 Safari 中的网络检查器。在 Safari 4 beta 中，您可以转到“高级”首选项，然后选择“在菜单栏中显示开发菜单”。我不记得这个偏好是什么时候引入的，但在早期版本的 Safari 中，你应该可以关注 these instructions 来启用检查器。完成此操作后，您应该能够右键单击（如果没有鼠标右键，请按住 Control 单击）并选择“检查元素”，以调出 Web 检查器。在较新版本的 Safari 中，您还应该能够从“开发”菜单中选择“显示 Web 检查器”（Command-Option-I）。这将向您展示有关您的 CSS 以及元素指标如何工作的大量信息，这将有助于您调试问题。

【讨论】：

谢谢，右边栏是不同的颜色，它应该和它上面按钮右边的蓝色元素一样宽。如果你愿意，请告诉我是不是？谢谢布赖恩。
以下是我看到的；你的意思是你想让灰色的侧边栏与“今天打电话或停下来”对齐吗？ ephemera.continuation.org/stackoverflow/cbier9-sidebar.png
是的，你的真的很古怪，看起来按钮不应该是全白背景。这太疯狂了