我正在为某人制作网站/模型，我已经完成并正在测试以确保它可以跨多个浏览器工作。它在 Chrome 和 Opera 中运行良好，但令我惊讶的是，在 Safari 中，一切都变得一团糟。我什至不知道哪里出了问题，就是看起来很奇怪。网址在这里:http://addisonbean.com/site/ .此外，当我上传到我的服务器时，页脚中的标题“查找我们”被向下移动到左侧，即使在 Chrome 中也是如此。
如果有任何帮助，我将不胜感激。这是任何想要的人的来源:
index.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/样式.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');
}
最佳答案
尝试修复来自 W3C Validator 的这些错误, 清除浏览器缓存并在 Safari 中重试。
您的 CSS 也需要一些清理。
关于html - 网站在 Safari 中表现异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17666275/