jQuery白框只出现在Safari上

时间:2013-07-29 05:09:08

标签: jquery html

水平白框仅在初始加载时显示jQuery div之间的浏览器页面的宽度(在第一个“棕榈树”pic和第二个“箭头”pic之间)。我正在使用可能与它有关的视差风格效果。问题仅在使用Safari时出现,而不是在任何其他浏览器中出现。窗口调整大小或滚动后,框会消失。提前谢谢!

网站: www.fullblownedit.com

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>fullblownedit \\</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
    background-color: #fff;
    margin-top: 0px;
}
body,td,th {
    font-family: Helvetica, Arial, sans-serif;
    color: #fff;
}
</style>


<script type="text/javascript">
    var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

if (isMobile.any()) {
    window.location = 'http://www.fullblownedit.com/mobile.html';
}
</script>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#nav').localScroll(800);
    $('#nav_badge').localScroll(800);


    $('#intro').parallax("50%", 0.1);
    $('#second').parallax("50%", 0.1);
    $('.bg').parallax("50%", 0.4);
    $('#third').parallax("50%", 0.3);

})

</script>

</head>
<body>
<ul id="nav">
 <li><a href="#intro" title=""><img src="images/dot.png" alt="Link" /></a></li>
 <li><a href="#second" title=""><img src="images/dot.png" alt="Link" /></a></li>
 <li><a href="#third" title=""><img src="images/dot.png" alt="Link" /></a></li>
 <li><a href="#fifth" title=""><img src="images/dot.png" alt="Link" /></a></li>
    </ul>



<div id="intro">
        <div class="story">


   <div align="center"><img src="images/logo.png" width="90" height="115"></div>

          </div>
</div>
</div>
    </div>

    <div id="second">
        <div class="story">
          <div class="bg"> </div>
          <div class="float-right">

            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>

              <div align="center"><img src="images/set.png" width="120" height="120">

              </div>
            <h2>&nbsp;</h2>
            <h1 align="center">

            <h1 align="left"><font color="#16a6b6"><font size="7"><strong>EDIT ANYWHERE.</strong></font></h1>
                <p align="left"><font color="#16a6b6">Whether we need to drop in and edit from our mobile edit bay, collaborate remotely, or travel to set during a production. We'll be a creative force ready to go wherever necessary.</font></p>



      </div>
</div>

    </div>

    <div id="third">
        <div class="story">
            <div class="float-left">

<h1 align="left"><font color="#ffffff"><font size="7"><strong>CONNECT</strong></font></h1>

<p><font size="8" face="Helvetica Light, Helvetica, Arial">hello@fullblownedit.com</font></p>

<p><font size="7"face="Helvetica Light, Helvetica, Arial">(949) 424-3348</font></p>

           </div>
        </div>
    </div>

    <div id="fifth">
      <div class="story">

       <h1 align="center">
<h1 align="center"><font color="#000000"><font size="7"><strong>WATCH</strong></font></h1>
       <p align="center"><img src="images/sm_arrow.png" width="30" height="87"></p>
            <center>
        <iframe allowfullscreen="yes" frameborder="0" height="3820" width="900" src="fbe_watch.html"></iframe>


<ul id="nav_badge">
   <div align="center"><a href="#intro" title=""><img src="images/badge.png" width="115" height="117"></a></div>
    </ul>


<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>

      </div> 
</div> 

                    </div>

</body>
</html>

CSS:

/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/


@charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    min-width: 980px;
    padding: 0;
}

p{
    margin: 0 0 20px 0; 
}

p, ul{
    font-family:Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size-adjust:0.488;
    font-weight:200;
    font-style:normal;
}

img{
    border: 0;
}


h1, #pixels{
    font-family: Helvetica, Arial, serif;
    font-size-adjust:0.40;
    font-weight:700;
    font-style:normal;
}

h2{
    font-family: Helvetica, Arial, sans-serif;
    font-size-adjust:0.531;
    font-weight:500;
    font-style:normal;
}

.float-left{
    float: left;    
    margin: 0 0 0 20px;
}

.float-right{
    float: right;
    margin: 0 20px 0 0;
}

.center{
    font-size: 2.5em;
    padding: 80px 0 0 0;
    text-align: center;
}

#nav{
    list-style: none;
    position: fixed;
    right: 25px;
    top: 10px;
}

#nav li{
    margin: 0 0 15px 0; 
}


#header, #intro, #second{
    width: 100%;
}

#intro{
    background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
    color: white;
    height: 665px;
    margin: 0 auto;
    padding: 0;
}

#second{
    background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
    color: white;
    height: 900px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}

#second .bg{
    background: url(images/trainers.png) 50% 0 no-repeat fixed;
    height: 1300px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 900px;
    z-index: 200;
}

#third{
    background: url(images/thirdBG.jpg) 50% 0 no-repeat fixed;
    color: white;
    height: 565px;
    padding: 100px 0 0 0;   
}

#fifth{

    color: white;
    height: 100px;
    margin: 0 auto;
    padding: 20px 0 0 0;
}

.story{
    margin: 0 auto;
    min-width: 980px;
    overflow: auto;
    width: 980px;
}

.story .float-left{
    padding: 100px 0 0 0;
    position: relative;
    width: 500px;   
}
.story .float-right{
    padding: 100px 0 0 0;
    position: relative;
    width: 350px;   
    z-index: 999;
}

1 个答案:

答案 0 :(得分:0)

在Chrome中也有加载,你可以尝试overflow:hidden,或者尝试重置css, http://meyerweb.com/eric/tools/css/reset/