堆栈内存溢出
  简体   繁体   English

Safari的CSS间距问题？

[英]CSS spacing issues with Safari?

 原文  2009-04-08 19:49:53  9   3    html/ css

问题描述

I have made a list based navigation bar for my newest project and I have added two information bars on each side of the navigation. 我为我的最新项目制作了一个基于列表的导航栏，并在导航的每一侧添加了两个信息栏。 It is coming out as desired in Firefox and IE but oddly enough Safari is acting up. 它在Firefox和IE中按照需要出现，但奇怪的是Safari正在起作用。 It is making a large space between the navigation bar and the right side information bar. 它在导航栏和右侧信息栏之间形成了一个很大的空间。

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: 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>

I have been fighting with this for hours and being new to CSS I am hoping that someone out there can give me a hand! 我已经和它斗争了几个小时并且是CSS的新手我希望那里有人可以帮助我！ Any advice is appreciated! 任何建议表示赞赏！ Thanks :) 谢谢 ：）

  • Chris 克里斯

EDIT: My doctype is transitional: 编辑：我的doctype是过渡性的： 

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

sorry 抱歉

EDIT ----------- 编辑 -----------

I changed all the units to pixels, but the issue is still being presented. 我将所有单位更改为像素，但问题仍然存在。 Now it looks fine on safari on my macbook but not on safari on my pc, or in firefox for that matter. 现在它在我的macbook上的safari看起来很好，但不是在我的电脑上的safari，或者在firefox上。 it is just expanding so much that it is pushed down one line. 它只是在扩张，以至于它被推下了一条线。

Here is my 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;
}



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;
}

It can be found here; 在这里能找到它;

http://www.christopherbier.com/gbg http://www.christopherbier.com/gbg

Any help is appreciated!!! 任何帮助表示赞赏！

3 个解决方案

解决方案1
 2  2009-04-08 20:09:35

I haven't got Safari so I cannot test, (although I'm using Chrome), but the problem is probably coming from the 我没有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;
}

Try to use consistent units (ie try all pixels, and when you get it right you can mess around with % if you are feeling brave) and make sure that the sum of the widths of your columns - does not exceed the width of the container div #menubar . 尝试使用一致的单位（即尝试所有像素，当你做对了，你可以乱用％，如果你感觉勇敢）并确保你的列的宽度之和 - 不超过容器的宽度div #menubar 。

In addition you should specify a DOCTYPE or yo uwill get problems between different browsers. 另外，您应该指定DOCTYPE，否则您将在不同浏览器之间遇到问题。 If you do not declare a specific docType correctly a visitors browser must "guess" (usually by applying the loosest possible docType or a "quirks" mode docType of its own) resulting in slower rendering. 如果您没有正确声明特定的docType，则访问者浏览器必须“猜测”（通常通过应用最宽松的docType或其自身的“怪癖”模式docType）导致渲染速度变慢。

If you do not specify a DOCTYPE you may have alot of trouble. 如果您未指定DOCTYPE，则可能会遇到很多麻烦。

解决方案2
 2 已采纳  2009-04-08 22:53:22

You seem to have made some adjustments already, based on the state of that site you linked to, but it's still not working properly across different browsers. 根据您链接到的网站的状态，您似乎已经做了一些调整，但它仍然无法在不同的浏览器中正常工作。

I think your best bet is to set that phonebg.gif image as a background on the entire #menubar div, instead of on the left and right parts of it, and then add a white background on the #nav . 我认为你最好的选择是将phonebg.gif图像设置为整个#menubar div的背景，而不是它的左右部分，然后在#nav上添加白色背景。

That way you won't have to set a width on that right div at all (or at least not a width that needs to be so precise as to make sure the 3 parts exacty match up to the full width). 这样你就不必在那个右边的div上设置一个宽度（或者至少不需要那么精确的宽度，以确保3个部分完全匹配到整个宽度）。

解决方案3
 0  2009-04-08 20:43:20

尝试在列表周围添加div。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML和CSS间距问题 - HTML and CSS spacing issues CSS字母间距SAFARI - CSS letter-spacing SAFARI Safari 7中的CSS布局问题 - CSS layout issues in Safari 7 CSS 弹出窗口 - safari 问题 - CSS popup - safari issues Safari 5.1打破了CSS表格单元格间距 - Safari 5.1 breaks CSS table cell spacing Safari，Opera，IE的CSS问题 - CSS Issues with Safari, Opera, IE Safari css问题（负边际？） - Safari css issues (negative margin?) CSS - Safari 中 REM 缩放的问题 - CSS - Issues with REM scaling in Safari html / css的页脚格式和间距问题 - Footer formatting and spacing issues with html/css Flexbox的HTML / CSS导航栏间距问题 - HTML/CSS nav bar spacing issues with flexbox
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM