【发布时间】：2023-03-26 00:05:02
【问题描述】：
因此，我似乎可以调试带有 Safari 的边距问题。在 Firefox、chrom、ie 等中一切正常，但不是 safari。我将我的内容 div 定位在我的标题下方，但在 safari 中，内容 div 与标题重叠。 IOW，即使我没有将内容 div 替换为在标题下齐平，Safari 阅读它的方式仍然存在明显差异。谁能帮我找出如何调和这些保证金问题？我完全是自学成才的，所以我敢肯定代码是伪劣的。
这是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>On Tapa The World | Welcome!</title>
<link rel="stylesheet" type="text/css" href="about_debug.css"/>
<link href='http://fonts.googleapis.com/css?family=Allura|Squada One|Arial' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navMenu">
<ul>
<li>Home</li>
<li>Locations/Schedule</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<!--end navMenu div -->
<div class="contentBackground"><a href="http://twitter.com/ontapatheworld" target="_blank"><div id="icons_twitter"></div></a><!--end twitter div --><a href="http://facebook.com/ontapatheworld" target="_blank"><div id="icons_facebook"></div></a><!--end facebook div --><div class="content"><h2>Get to Know Us</h2>
<div id="menuContentLeft"><h3>What are Tapas?</h3>
<p>Tapas are a wonderful tradition that originated in Spain and dates back several hundred years. The word tapa is derived from the Spanish word tapar which means "to cover". It is said that this tradition began in taverns in old Spain when patrons were served wine or sherry along with slices of bread or salty meats such as ham or chorizo. The patrons would cover their drinks with these snacks between sips to keep the fruit flies out. The salty meats were meant to make the consumers thirsty in order to increase alcohol sales. The tavern owners began developing a variety of small snacks or tapas to serve the patrons to cover their drinks.</p>
<p>As time has passed, tapas have evolved into an important part of Spanish cuisine and culture. They are now served in bars across Spain as well as in many other countries and incorporate flavors and influences from around the world. Tapas today are typically small portioned and are meant to be shared. It is common for patrons to order several plates at a time. These great culinary creations are always accompanied with a friendly, inviting and magical atmosphere that we hope you find here On Tapa The World!</p>
</div>
<div id="aboutVerticalBar"></div><!-- end verticalBar div -->
<div id="menuContentRight">
<h3>Who Are We?</h3>
<p>Matthew and Brant have always shared a common appreciation and passion for food. This inspired them to always be on the look out for new tastes and experiences around the country. In doing so, the two discovered and fell in love with the very unique concept of tapas. They agreed that the great food, fun atmosphere, good music as well as the overall enchanting and intimate experience that all tapas restaurants provided proved to be unmatched. These common themes became the reasons that these places became some of their favorite establishments.</p>
<p>Along their way, Brant and Matthew made another unique discovery. They encountered the pleasant food and delightful ambiance created by food trucks. It was after attending several food truck parks, numerous special events featuring food trucks and being impressed with the food as well as the atmosphere there that the duo developed the idea to marry the two concepts. Piecing together the puzzle with their combined restaurant experience, Matthew's culinary and hospitality background and Brant's extensive business education it all became a clear and easy decision. Combining Spain's beautiful tradition with flavors from around the globe and bringing them to the streets in true hip food truck fashion puts you On Tapa The World!</p>
</div>
<br /><br />
</div><!--end content div -->
<br />
</div><!--end contentBackground div -->
</div>
</body>
</html>
现在是 css：
/* CSS Document */
body {
background-color:#000;
font-family: 'Allura', cursive;
font-size: 36px;
color: #FFF;
margin: 0px;
}
a {
text-decoration:none;
color:#FFF;
padding-left:3px;
padding-right:3px;
margin-left: 31px;
}
ul {
list-style:none;
margin-top:0px;
padding: 0px;
position:relative;
text-align: center;
}
li {
display: inline;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
}
a:hover {
color:#C61010;
padding-left:3px;
padding-right:3px;
margin-left: 31px;
}
p {
text-indent: 35px;
/*float:left;*/
font-family: 'Arial', cursive;
font-size: 16px;
line-height: 1.25;
}
img {
border: none;
}
h2 {
font-size: 42px;
color: #fff;
text-align:center;
margin-left: 86px;
}
h3 {
font-size: 36px;
color: #fff;
text-align:center;
font-family: 'Allura', cursive;
margin:0px;
}
h4 {
font-size: 24px;
color: #fff;
font-family: 'Allura', cursive;
margin:0px;
}
#calendarMargin {
margin-top: 0px;
margin-left: 140px;
height: 600px;
width: 800px;
}
.footerFrames {
margin-right: auto;
margin-left: auto;
height: 346px;
width: 1100px;
}
.contentBackground {
background-image: url(logo_vignette.png);
height: 450px;
width: 1200px;
margin-right: auto;
margin-left: auto;
}
.content {
background-image:url(images/contentOverlay.png);
background-repeat:repeat;
height: 720px;
width: 1080px;
margin-right: auto;
margin-left: auto;
margin-top: -46px;
margin-bottom: 27px;
display: block;
}
.menuContent {
background-image:url(images/contentOverlay.png);
background-repeat:repeat;
height: 945px;
width: 1080px;
margin-right: auto;
margin-left: auto;
margin-top: -46px;
margin-bottom: 27px;
}
.aboutContent {
background-image:url(images/contentOverlay.png);
background-repeat:repeat;
height: 600px;
width: 1080px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 27px;
display: block;
position:relative;
}
#navMenu {
border-top: 4px double #FFF;
border-bottom: 4px double #FFF;
margin-top:16px;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
width: 900px;
height: 30px;
padding-bottom: 12px;
}
/*#icons {
margin-right: auto;
margin-left: auto;
padding: 0px;
height: 51px;
width: 1088px;
}*/
#icons_twitter {
background-image:url(icons_twitter.png);
margin-right: 60px;
margin-top: 10px;
height:50px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#icons_facebook {
background-image:url(icons_facebook.png);
margin-right: 3px;
margin-top: 10px;
height:51px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#icons_twitter:hover {
background-image:url(icons_twitterHover.png);
background-repeat:no-repeat;
margin-right: 60px;
margin-top: 10px;
height:50px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#icons_facebook:hover {
background-image:url(icons_facebookHover.png);
background-repeat:no-repeat;
margin-right: 3px;
margin-top: 10px;
height:50px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#tagline {
text-align: center;
font-size: 20px;
font-family: 'Squada One', cursive;
height: 115px;
width: 305px;
line-height: 40px;
margin-top: 238px;
margin-left: 206px;
text-shadow: 8px 8px 8px #000;
}
#twitterWidget {
margin-top: 30px;
height:346px;
width:520px;
}
#slider {
margin-left: 575px;
margin-top: -346px;
padding: 0px;
}
#aboutContentLeft {
font-family: 'Arial', cursive;
font-size: 14px;
line-height: 1.5;
height: 399px;
width: 399px;
margin-left:86px;
float: left;
}
#aboutVerticalBar {
border-left: 6px double #fff;
width: 20px;
height: 480px;
float: left;
margin-left: 15px;
margin-right: 15px;
}
#aboutContentRight {
height: 399px;
width: 399px;
margin-left:50px;
float: left;
}
#menuContentLeft {
font-family: 'Arial', cursive;
font-size: 14px;
line-height: 1.5;
width: 495px;
float:left;
margin-left:20px;
}
#menuVerticalBar {
border-left: 6px double #fff;
width: 20px;
height: 724px;
float: left;
margin-left: 15px;
margin-right: 15px;
}
#menuContentRight {
font-family: 'Arial', cursive;
font-size: 14px;
line-height: 1.5;
width: 495px;
float:left;
}
#menuHorizontalBar {
border-top: 4px double #fff;
margin-right: auto;
margin-left: auto;
width: 248px;
margin-top: 20px;
margin-bottom: 20px;
}
#menuBottomHorizontalBar {
border-top: 4px double #fff;
margin-right: auto;
margin-left: 406px;
width: 248px;
margin-top: 654px;
margin-bottom: 20px;
}
#dessert {
font-family: 'Arial', cursive;
font-size: 14px;
width: 432px;
margin-right:auto;
margin-left: 340px;
position: relative;
}
#contact {
text-align:center;
font-family: 'Arial', cursive;
font-size: 24px;
}
#form {
color:#fff;
font-size:18px;
font-family: 'Arial', cursive;
}
#bottomHorizontalBar {
border-bottom: 4px double #fff;
margin-right: auto;
margin-left: 406px;
width: 248px;
margin-bottom: 20px;
}
希望尽快与您讨论这个问题！谢谢！
【问题讨论】：