CSS/jquery在Safari和IE中的固定位置和神祕邊距

Question

當您將鼠標移動到固定導航欄上時，我正在使用jQuery在頁面頂部製作固定的下拉子導航。

我通過更改以前相對定位到固定位置的元素來完成此操作。但是這會在IE7和Safari中產生不希望的10px邊距。

起初我以爲這是由css box-shadow產生的餘量，但是在刪除了那行代碼後，事實證明情況並非如此。

任何洞察力或建議非常感謝！

的CSS：

#headerContainer { 
    width: 940px; 
    position: relative; 
    left: -10px !important; 
    z-index: 900; 
    border: 1px solid red; 
    } 

#header { 
    position: relative; 
    width: 940px; 
    background: #fff; 
    padding: 74px 0 20px 20px; 
    z-index: 1000; 
    box-shadow: 0px 0px 13px #c3c1bd; 
    -moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */ 
    -webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */ 
    } 

#nav { 
    width: 100%; 
    height: 49px; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 2000; 
    } 

#nav ul { 
    height: 49px; 
    width: 920px; 
    display: block; 
    } 

#nav ul li { 
    height: 32px; 
    list-style: none; 
    display: block; 
    float: left; 
    background: #000; 
    border-left: 1px solid #fff; 
    padding: 7px 14px 0 14px; 
    font-family: "Fette"; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    } 

#nav ul li a { 
    display: block; 
    color: #ccc; 
    width: 100%; 
    height: 100%; 
    } 

#nav ul li a:hover {text-decoration: none} 

.showNav { 
    display: block !important; 
    position: relative !important; 
    top: 0px !important; 
    padding-bottom: 20px !important; 
    } 

jQuery的：

$(window).scroll(function() { 
    var scrolledpx = parseInt($(window).scrollTop()); 
    if (scrolledpx < 375) { 
     $('#nav ul, #header').unbind('mouseenter mouseleave'); 
     $('#header').addClass('showNav'); 
    } else { 
     $('#header').removeClass('showNav'); 
     $('#nav ul').hover(function() { 
       $('#header').slideDown('fast').css({ 
        'position' : 'fixed', 
        'top' : '0px' 
       }); 
     }, function() { 
     }); 

     $('#header').hover(function() { 

     }, function() { 
      $('#header').slideUp('fast'); 
     }); 
    } 
}); 

的HTML：

<div id="wrapper">  

    <div id="nav"> 
     <ul class="center"> 
      <li id="logo"> 
       <a href="index.html"> 
        <img src="assets/images/logo.png" alt="" /> 
       </a> 
      </li> 

      <li> 
       <a href="#">About</a> 
      </li> 

      <li> 
       <a href="#">Contributors</a> 
      </li> 

      <li> 
       <a href="#">Contact</a> 
      </li> 

     </ul> <!-- nav --> 
    </div> 

    <div id="headerContainer" class="center"> 
     <div id="header"> 

      <h3 id="scrapHeader">Thoughts About:</h3> 

      <input id="headerSearch" type="text" value="search" /> 
      <input id="headerSearchBtn" type="submit" value="" /> 

      <div class="clear"></div> 

      <div id="categoryContainer"> 
       <ul> 
        <li> 
         <a href="#">Design</a> 
         <strong>143</strong> 
        </li> 
        <li> 
         <a href="#">Building</a> 
         <strong>143</strong> 
        </li> 
        <li> 
         <a href="#">Brands</a> 
         <strong>143</strong> 
        </li> 
        <li> 
         <a href="#">Technology</a> 
         <strong>143</strong> 
        </li> 

       </ul> 

       <span id="categoryMore">More</span> 
       <div class="clear"></div> 
      </div> <!-- categoryContainer --> 
      <div class="clear"></div> 
     </div> <!-- header --> 
     <div class="clear"></div> 
    </div> 

Answer 1

#headerContainer { 
    width: 960px; 
    position: relative; 
    z-index: 900; 
    border: 1px solid red; 
    } 

#header { 
    position: relative; 
    width: 940px; 
    background: #fff; 
    padding: 74px 0 20px 20px; 
    z-index: 1000; 
    box-shadow: 0px 0px 13px #c3c1bd; 
    -moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */ 
    -webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */ 
    }