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无效。中心]，[不存在anyomre（并且在设计中实际上并不需要事物的外观），你也可以在px中指定任何标题图像的尺寸。

不知道为什么你在除了mainwrap以外的任何东西上使用margin auto。尝试保证金：0;代替

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

如果你不想使用边框{border：none}（如果你说边框：0px可靠;某些浏览器仍然会尝试绘制一些东西）

这可能无法解决问题，但它会向正确的方向迈进，因为标记越多valid，浏览器就越容易找到它。

Answer 2

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

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

如果您仍然无法弄清楚出了什么问题，那么您应该在Safari中尝试网络检查器。在Safari 4 beta中，您可以转到“高级”首选项，然后选择“在菜单栏中显示开发菜单”。我不记得何时引入了这种偏好，但在早期版本的Safari中，您应该能够关注these instructions来启用检查器。完成后，您应该能够右键单击（如果没有鼠标右键，则单击控制键）并选择“检查元素”，以打开Web检查器。在更新版本的Safari中，您还应该能够从“开发”菜单中选择“显示Web Inspector”（Command-Option-I）。这将向您显示有关CSS的大量信息以及元素的指标如何工作，这可以帮助您调试问题。

CSS的另一个Safari宽度问题

2 个答案: