Html Safari和x2014的保证金问题；代码在其他浏览器中的外观与我所希望的完全相同
当我在Chrome、Firefox和IE中查看它时，下面的代码看起来正是我所希望的，但是当我在Safari中查看它时，应该位于浏览器窗口顶部的栏与浏览器窗口顶部之间有一个很大的间隙，并且覆盖了我的一些文本。有谁能告诉我为什么它在其他主流浏览器中都能工作，但在Safari中却给我带来了问题？另外，你知道我如何在不弄乱其他浏览器代码的情况下修复它吗 我真的很期待你们的消息。：）希望你能帮我找出问题所在。^。^提前谢谢 HTMLHtml Safari和x2014的保证金问题；代码在其他浏览器中的外观与我所希望的完全相同,html,css,safari,cross-browser,margin,Html,Css,Safari,Cross Browser,Margin,当我在Chrome、Firefox和IE中查看它时，下面的代码看起来正是我所希望的，但是当我在Safari中查看它时，应该位于浏览器窗口顶部的栏与浏览器窗口顶部之间有一个很大的间隙，并且覆盖了我的一些文本。有谁能告诉我为什么它在其他主流浏览器中都能工作，但在Safari中却给我带来了问题？另外，你知道我如何在不弄乱其他浏览器代码的情况下修复它吗 我真的很期待你们的消息。：）希望你能帮我找出问题所在。^。^提前谢谢 HTML <!DOCTYPE html> <html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Joshua Huff | From Scratch #1</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Poiret+One|Quicksand:400,700|Josefin+Sans:400,600,700|Special+Elite|Karla' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="top-border"></div>
<nav id="nav">
<ul ="nav-ul">
<li id="home-li"><a href="index.html"><img src="img/home.png" title="Home" alt="home" id="home" class="nav-img"></a></li>
<li id="services-li"><a href="services.html"><img src="img/suitcase blue.png" title="Services" alt="services" id="services" class="nav-img"></a></li>
<li id="portfolio-li"><a href="portfolio.html"><img src="img/bookmark blue.png" title="Portfolio" alt="portfolio" id="portfolio" class="nav-img"></a></li>
<li id="resources-li"><a href="resources.html"><img src="img/resource notes.png" title="Resources" alt="resources" id="resources" class="nav-img"></a></li>
<li id="about-li"><a href="about.html"><img src="img/info blue.png" title="About" alt="about" id="about" class="nav-img"></a></li>
<li id="contact-li"><a href="contact.html"><img src="img/telephone blue.png" title="Contact" alt="contact" id="contact" class="nav-img"></a></li>
</ul>
</nav>
<div id="social-icons">
<ul id="social-ul">
<li id="facebook-li"><a href="https://www.facebook.com/JoshuaMichaelHuff" target="_blank"><img src="img/facebook round.png" alt="Facebook" id="facebook" class="social-link"></a></li>
<li id="twitter-li"><a href="https://twitter.com/JoshuaHuff94" target="_blank"><img src="img/twitter round.png" alt="Twitter" id="twitter" class="social-link"></a></li>
<li id="instagram-li"><a href="https://instagram.com/Joshua_Huff7812" target="_blank"><img src="img/instagram round.png" alt="Instagram" id="instagram" class="social-link"></a></li>
</ul>
</div>
</header>
<div id="content-home">
<h1 id="name" class="title">Joshua Huff</h1>
<h4 id="slogan" class="title">You've gotta keep it real.</h4>
<div id="page-body">
<h2>Welcome to my website!</h2>
<p>My name is Josh. I'm very happy to see that you decided to stop by my little corner of the Web.
This website has been placed here for a very simple reason: for me to practice my web design abilities
and showcase what work I might have. More content and samples will be added to this website, and more
so to my portfolio, as time goes on and I do more work and gain more experience.</p>
<p>This site itself just happens to be the very first one I actually designed on my own — from scratch.
Any others have been me taking what other people have done and just modifying it to gain experience and
see what all I could do. Everything on this site has been thought of by me, laid out by me, and coded by
me — with absolutely no help whatsoever. I'm extremely proud of it (however simple it may be) and thought
I could make it the home for the rest of my work. I really hope everybody enjoys looking through this site
and seeing the different things I've done. Drop by the <a href="contact.html">Contact</a> page if you'd like to give me some
feedback and let me know what you think of everything. If you have any advice or pointers I'd love to hear
those too!</p>
<hr />
<footer id="footer-content">
<p id="footer-copyright">© Joshua Huff 2014. All rights reserved.</p>
</footer>
</div>
</div>
</body>
</html>
对于我来说，在Chrome、FF和Mac Safari中显示相同…@aldanux你的意思是它正确地显示在窗口顶部的栏上，还是它以错误的方式显示在有间隙的地方，并且它覆盖了文本？正确地显示在顶部的栏上。我想知道为什么我的表现不同…：/您有哪个版本的safari操作系统？
/******************************
GENERAL
******************************/
body {
background: #eee;
font-family: 'Open Sans', sans-serif;
max-width: 1200px;
}
h1 {
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
margin-bottom: -2%;
}
h2 {
margin-bottom: -1%;
font-family: Quicksand, 'Open Sans', sans-serif;
font-size: 25px;
font-weight: bold;
color: #262625;
}
h4 {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
padding-bottom: 3%;
}
.title {
text-align: center;
padding-bottom: 0;
}
p {
text-indent: 30px;
text-align: justify;
}
a {
text-decoration: none;
color: #1e678c;
}
a:hover {
text-decoration: none;
color: #db571a;
}
a:active {
text-decoration: none;
color: #c40d0d;
}
#top-border {
z-index: 1;
position: fixed;
width: 1300px;
height: 45px;
margin-top: -5%;
margin-left: 2%;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
box-shadow: 0 0 30px #888;
}
/******************************
NAVIGATION
******************************/
nav {
opacity: 0.5;
padding: 10px 0;
margin: 1% 50px;
max-width: 100px;
height: 524px;
float: left;
position: fixed;
border-radius: 40px;
background: #45484d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjNDU0ODRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNiUiIHN0b3AtY29sb3I9IiM0NTQ4NGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2JSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, #45484d 1%, #45484d 6%, #45484d 6%, #000000 49%, #000000 49%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#45484d), color-stop(6%,#45484d), color-stop(6%,#45484d), color-stop(49%,#000000), color-stop(49%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #45484d 1%,#45484d 6%,#45484d 6%,#000000 49%,#000000 49%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #45484d 1%,#45484d 6%,#45484d 6%,#000000 49%,#000000 49%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #45484d 1%,#45484d 6%,#45484d 6%,#000000 49%,#000000 49%); /* IE10+ */
background: linear-gradient(135deg, #45484d 1%,#45484d 6%,#45484d 6%,#000000 49%,#000000 49%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
box-shadow: 0 0 65px #888;
-webkit-box-shadow: 0 0 100px #888;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
nav:hover {
opacity: 1;
filter: alpha(opacity=50);
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: block;
padding: 15px;
margin-left: -3px;
width: 56px;
border-bottom: 1px solid #888;
text-align: center;
}
nav li:hover {
background-color: #292b2e;
}
li:nth-child(1) {
border-top-left-radius: 35px;
border-top-right-radius: 35px;
}
li:nth-child(6) {
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
#contact-li {
border-bottom: none;
padding-bottom: 6px;
}
.nav-img {
opacity: 0.4;
height: 54px;
width: 54px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.nav-img:hover {
opacity: 1;
filter: alpha(opacity=100);
}
/******************************
SOCIAL LINKS
******************************/
#social-icons {
position: fixed;
/* margin-top: 10%; */ /* ONLY FOR WHEN SOCIAL LINKS ARE NOT ''POSITION: FIXED' */
/* margin-left: 98%; */ /* ONLY FOR WHEN SOCIAL LINKS ARE NOT ''POSITION: FIXED' */
margin-top: 7%; /* ONLY FOR WHEN SOCIAL LINKS ARE 'POSITION: FIXED' */
margin-left: 87%; /* ONLY FOR WHEN SOCIAL LINKS ARE 'POSITION: FIXED' */
}
#social-ul li {
list-style: none;
display: block;
}
.social-link {
height: 30px;
width: 30px;
padding: 15px 15px 0 15px;
opacity: 0.5;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.social-link:hover {
opacity: 1;
filter: alpha(opacity=100);
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
}
/***** PUT SOCIAL LINKS ABOVE CONTENTS *****/
/*#social-icons {
margin-left: 80%;
}
#social-ul li {
list-style: none;
display: inline-block;
}
.social-link {
height: 30px;
width: 30px;
padding: 15px 15px 0 15px;
opacity: 0.5;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.social-link:hover {
opacity: 1;
filter: alpha(opacity=100);
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
}*/
/******************************
PAGE: HOME
******************************/
#content-home {
margin-top: 5%; /* ONLY FOR WHEN SOCIAL LINKS ARE BESIDE CONTENTS */
/* margin-top: 5%; */ /* ONLY FOR WHEN SOCIAL LINKS ARE ABOVE CONTENTS */
margin-left: 18%;
text-wrap: none;
}
/******************************
PAGE: SERVICES
******************************/
/******************************
PAGE: PORTFOLIO
******************************/
/******************************
PAGE: RESOURCES
******************************/
/******************************
PAGE: ABOUT
******************************/
/******************************
PAGE: CONTACT
******************************/
/******************************
FOOTER
******************************/
footer {
min-width: 100%;
padding-top: 2%;
padding-bottom: 1%;
color: gray;
font-size: 13px;
}
#footer-copyright {
text-align: center;
}