我正在为某人开发一个站点/模型，我已经完成它并正在测试以确保它可以在多个浏览器中运行。它在 Chrome 和 Opera 中运行良好，但令我惊讶的是，在 Safari 中，一切都搞砸了。我什至不知道怎么了，只是看起来很奇怪。该网站在这里：http ://addisonbean.com/site/ 。此外，当我上传到我的服务器时，页脚中“找到我们”的标题被向下和向左移动，即使在 Chrome 中也是如此。
我会很感激任何帮助。这是任何想要的人的来源：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEARWELL</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div id="sub-header">
<div class="top">
<div id="sub-top">
<input type="text" placeholder="Search by keyword or product number">
<span id="search" class="red-gradient">
<input type="submit" value="">
</span>
<ul class="red-gradient" id="top-nav">
<li>Language</li>
<li id="arrow"></li>
<li>Where to Buy</li>
<li>Login</li>
<li>0 Items in RFQ Cart</li>
</ul>
</div>
<span class="clearfix"></span>
</div>
<nav id="pages">
<h1></h1>
<ul>
<li>Products</li>
<li id="current">Resources</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<h2 id="page-title">Resources</h2>
</div>
<span class="clearfix"></span>
</header>
<section>
<div id="current-page">Home > <b>Resources</b></div>
<h3>Lorem Ispum Dolor</h3>
<nav id="links">
<li>Wearwell Warrenty PDF</li>
<li>Maintenance & Upkeep Guide</li>
<li>Chemical Resistance Guide</li>
<li>Installation Guide</li>
<li>2013 PDF Catalog</li>
<li>Frequently Asked Questions</li>
<span class="clearfix"></span>
</nav>
<h3>Amet Lacinia Nec Hendrer</h3>
<p id="info">Aenean rhoncus, urna quis faucibus cursus, nunc leo rhoncus velit, vitae aliquam justo lectus eu nunc. Ut elit massa, commodo eget blandit eu, consectetur quis neque. Fusce consectetur libero quis velit mattis dignissim. Sed nibh dui, lacinia nec hendrer vitae turpis.</p>
</section>
<h3 id="bottom">
We develop working surfaces for industrial athletes
</h3>
<footer>
<div id="footer-center">
<table>
<tbody>
<tr>
<th>Products</th>
<th>Resources</th>
<th>About Us</th>
</tr>
<tr>
<td>ErgoDeck</td>
<td>Warranty</td>
<td>Capabilities</td>
</tr>
<tr>
<td>Rejuvenator</td>
<td>Maintenance Guide</td>
<td>News</td>
</tr>
<tr>
<td>Diamond Plate</td>
<td>Chemical Resistance Guide</td>
<td>Innovation</td>
</tr>
<tr>
<td>Grit Shield</td>
<td>Installation Guide</td>
<td>Request a Demo</td>
</tr>
<tr>
<td>Rover</td>
<td>Download Catalog</td>
<td>Request A Site Survey</td>
</tr>
<tr>
<td>Invision</td>
<td>Videos</td>
<td>Contact Us</td>
</tr>
<tr>
<td>Fit Kits</td>
<td></td>
<td>Terms and Conditions</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Legal</td>
</tr>
</tbody>
</table>
<aside>
<span id="line">
<img src="img/line.png" alt="">
</span>
<span id="content">
<h4>Find Us</h4>
<p class="footer-info">
Wearwell Inc.
</p>
<p class="footer-info">
199 Threet Industrial Road <br>
Smyrna, Tennessee 37167
</p>
<p class="footer-info">
Email: <a href="mailto:floors@wearwell.com">floors@wearwell.com</a>
</p>
<div id="icons">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</span>
</aside>
<span class="clearfix"></span>
</div>
</footer>
</body>
</html>
css/style.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-family: helvetica;
background: url('../img/bg.jpg');
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .clearfix { zoom: 1; }
.red-gradient {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418));
background: -webkit-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center, #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
display: inline-block;
}
header {
background: url('../img/header.jpg');
color: white;
-webkit-box-shadow: 2px 0 6px black;
-moz-box-shadow: 2px 0 6px black;
box-shadow: 2px 0 6px black;
}
#sub-header {
width: 1200px;
margin: 0 auto;
}
.top {
position: relative;
right: 0;
padding-bottom: 20px;
font-size: 12px;
font-weight: 200;
}
.top input[type=text] {
margin: 0 1px 0 0;
border: none;
padding: 12px;
height: 28px;
width: 230px;
background: rgba(255, 255, 255, .7);
float: left;
}
.top input[type=text]::-webkit-input-placeholder {
color: black;
}
.top input[type=text]::-ms-input-placeholder {
color: black;
}
.top input[type=text]::-moz-placeholder {
color: black;
}
span#search {
width: 28px;
height: 28px;
padding: 12px;
float: left;
margin-right: 5px;
}
.top input[type=submit] {
border: none;
background: url('../img/search.png') 50% 50% no-repeat;
width: 15px;
height: 15px;
padding: 0px;
float: left;
position: relative;
top: -7.5px;
left: -7.5px;
}
#top-nav {
height: 28px;
list-style: none;
padding: 0;
margin: 0;
}
#sub-top {
float: right;
}
#top-nav li {
list-style: none; /* for IE8 */
display: inline-block;
height: 28px;
float: left;
padding: 8px;
border-left: 1px solid black;
}
#top-nav li:first-child {
border: none;
}
#arrow {
background: url('../img/nav-arrow.png') 50% 50% no-repeat;
width: 28px;
margin: 0;
}
nav#pages {
background: rgba(0, 0, 0, .8);
height: 64px;
margin-bottom: 80px;
}
nav#pages h1 {
background: url('../img/logo.png') 50% 50% no-repeat;
width: 340px;
height: inherit;
margin: 0;
display: inline-block;
}
nav#pages ul {
list-style: none;
text-transform: uppercase;
float: right;
padding: 0;
margin: 0;
height: inherit;
display: inline-block;
}
nav#pages li {
list-style: none; /* for IE8 */
display: inline-block;
padding: 20px;
height: inherit;
line-height: 34px;
}
nav#pages li#current {
background: #cc3423;
}
#page-title {
float: right;
background: rgba(0, 0, 0, .8);
text-align: left;
padding: 30px;
padding-left: 40px;
padding-right: 375px;
text-transform: uppercase;
margin: 75px 0;
}
section {
background: white;
width: 1220px;
margin: 0 auto;
padding: 15px 25px 100px;
-webkit-box-shadow: 0 3px 10px #555;
-moz-box-shadow: 0 3px 10px #555;
box-shadow: 0 3px 10px #555;
}
#current-page {
font-size: 12px;
}
section h3 {
text-transform: uppercase;
margin: 25px 15px 10px;
}
nav#links {
list-style: none;
margin: 0 auto;
width: 1170px;
color: #eb6852;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
}
nav#links li {
background: #eaeaea;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjRiNGI0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #eaeaea 0%, #b4b4b4 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eaeaea), color-stop(100%,#b4b4b4));
background: -webkit-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: -o-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: -ms-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: radial-gradient(ellipse at center, #eaeaea 0%,#b4b4b4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#b4b4b4',GradientType=1 );
line-height: 75px;
width: 382px;
margin: 4px;
text-align: center;
float: left;
height: 75px;
}
nav#links li:nth-child(5) {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418));
background: -webkit-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center, #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
}
#info {
margin-left: 15px;
}
h3#bottom {
text-align: center;
color: #4d4d4d;
font-size: 40px;
font-weight: 200;
}
footer {
background: url('../img/footer.jpg');
color: white;
}
#footer-center {
margin: 0 auto;
padding: 30px 0;
width: 809px;
}
footer table {
float: left;
}
footer tr {
text-align: right;
}
footer td {
padding: 4px;
padding-left: 30px;
padding-right: none;
font-size: 15px;
}
footer th {
text-transform: uppercase;
padding: 7px;
padding-left: 30px;
padding-right: none;
}
aside {
float: left;
}
#line {
margin: 0 35px;
display: inline-block;
float: left;
}
aside #content {
float: left;
}
aside h4 {
text-transform: uppercase;
margin: 7px;
}
aside p.footer-info {
margin: 7px;
font-size: 15px;
line-height: 20px;
}
aside p.footer-info a {
color: #cc3524;
text-decoration: none;
}
#icons a {
height: 34px;
width: 37px;
display: inline-block;
background-repeat: no-repeat;
}
#icons a:nth-child(1) {
background-image: url('../img/icons/fb.png');
}
#icons a:nth-child(2) {
background-image: url('../img/icons/google.png');
}
#icons a:nth-child(3) {
background-image: url('../img/icons/twitter.png');
}
#icons a:nth-child(4) {
background-image: url('../img/icons/youtube.png');
}
#icons a:nth-child(5) {
background-image: url('../img/icons/in.png');
}