Question

因此我有一个保证金问题w / safari我似乎可以调试。一切正常在firefox，chrom，ie等，但不是safari。我已将我的内容div放在我的标题下方，但在safari中，内容div与标题重叠。 IOW，即使我没有将内容div替换为标题下的flush，但是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;
}

希望尽快与您讨论！谢谢！

Answer 1

在样式表之前添加重置CSS文件 - http://meyerweb.com/eric/tools/css/reset/。这将使浏览器默认样式变为零，并使所有浏览器中的内容更加容易。

margin-top:-46px; div上有.content，它正在向上拉。

保证金问题，Safari

1 个答案: