1. 首页
  2. 问答
  3. 在Safari中扮演奇怪的网站

在Safari中扮演奇怪的网站

2013-07-16 99 views
0

我正在为某人的网站/样机制作工作，并且已完成测试，确保它可以在多个浏览器中正常工作。它在Chrome和Opera中运行良好，但我很惊讶地发现，在Safari中，每件事都搞砸了。我甚至不知道什么是错，它看起来很奇怪。网站在这里：http://addisonbean.com/site/。此外，当我上传到我的服务器时，页脚中标题为“查找我们”的标题向下移动，即使在Chrome中也向左移动。在Safari中扮演奇怪的网站

我很感激任何帮助。下面是谁想要，源人：

的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 &amp; 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:[email protected]">[email protected]</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'); 
      }

来源

2013-07-16 user2512513

回答

0

尝试从W3C Validator修复这些错误，清晰的浏览器缓存，并在Safari再试一次。

您的CSS还需要一些清理。

来源

2013-07-16 01:08:58

+0

我修复了所有的错误，但仍然无法正常工作。但这太奇怪了。它现在在Chrome中搞砸了，但前提是我在服务器上查看它。它工作正常使用文件：// – user2512513

+0

但只有铬，它只是一个微小的边际/填充的东西或东西。它并不坏 – user2512513

相关问题

 相关问题