CSS/Jquery Safari 및 IE의 고정 위치 및 미스테리 여백

Question

고정 된 탐색 위에 마우스를 올려 놓으면 jQuery를 사용하여 페이지 상단의 하위 탐색을 고정 드롭 다운합니다.

이전에 상대적으로 고정 된 위치에 있던 요소를 변경하여이 작업을 수행했습니다. 그러나 이것은 IE7과 Safari에서 바람직하지 않은 10px 여백을 만듭니다.

처음에는 CSS 상자 그림자에 의해 생성 된 여백이라고 생각했지만 그 코드 줄을 제거한 후에는 사실이 아닌 것으로 판명되었습니다.

많은 통찰력이나 제안이 감사드립니다!

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 */ 
    }