3
필자는 가장 최근 프로젝트의 목록 기반 탐색 모음을 만들었으며 탐색의 각면에 두 개의 정보 막대를 추가했습니다. 그것은 파이어 폭스와 IE에서 원하는대로 나오고 있지만 이상하게도 사파리가 작동하고 있습니다. 탐색 막대와 오른쪽 정보 표시 줄 사이에 큰 공간을 만들고 있습니다.Safari에서 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 :
<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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
죄송
편집 -----------
모두 변경되었습니다. 단위는 픽셀이지만 문제는 여전히 제시되고 있습니다. 이제는 내 맥북에서 사파리가 잘 보이지만 내 PC의 사파리 나 파이어 폭스에서는 문제가되지 않는다. 그것은 너무 많이 확장되어 한 줄 아래로 밀려 나옵니다. 여기
내 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
어떤 도움에 감사드립니다!
실제 사이트의 doctype이 지정되어 있습니까? (그렇지 않다면, 표준 기반 렌더링을 얻기 위해 표준을 추가하는 것을 고려해야합니다.) – scunliffe
doctype을 포함하십시오. – inspite
내 doctype은 –