代码之家  ›  专栏  ›  技术社区  ›  Chris Bier

Safari的CSS间距问题?

css html
  •  3
  • Chris Bier  · 技术社区  · 16 年前

    我为我的最新项目制作了一个基于列表的导航栏,在导航的每一侧都添加了两个信息栏。在火狐和IE中,它的表现完全符合需要,但奇怪的是,Safari的表现已经够糟糕了。它在导航栏和右侧信息栏之间留出很大的空间。

    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是过渡性的: 

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

    对不起的

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

    我把所有的单位都改成了像素,但问题仍然存在。现在,我的MacBook上的Safari看起来不错,但PC上的Safari和火狐上的Safari就不一样了。它膨胀得太大了,以至于被压下一条线。

    这是我的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

    感谢您的帮助!!!!

    3 回复  |  直到 16 年前
        1
  •  2
  •   mercator    16 年前

    您似乎已经根据链接到的站点的状态进行了一些调整,但是它在不同的浏览器中仍然不能正常工作。

    我想你最好的办法是设定 phonebg.gif 图像作为整体背景 #menubar DIV,而不是它的左右部分,然后在 #nav .

    这样,您就不必在右DIV上设置宽度(或者至少不必设置需要如此精确以确保3个部分精确匹配到全宽的宽度)。

        2
  •  2
  •   Ian G    16 年前

    我没有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;
}

    尝试使用一致的单位(例如,尝试所有像素,如果你感觉勇敢的话,当你正确的时候,你可以用%来处理),并确保你的列宽之和不超过容器分区的宽度。 #menubar .

    此外,您还应该指定doctype或yo uwill get problems between different browsers。如果您没有正确地声明特定的doctype,访问者浏览器必须“猜测”(通常通过应用可能最宽松的doctype或其自己的“怪癖”模式doctype)导致渲染速度变慢。

    如果不指定doctype,可能会有很多问题。

        3
  •  0
  •   Jamie    16 年前

    尝试在列表周围添加一个div。

    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    5 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    5 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    5 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    5 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    5 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    6 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    6 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    6 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    6 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    6 月前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号