CSS / jQuery موقف ثابت وهامش الغموض في Safari & IE

Question

أنا أستخدم jQuery لإنشاء حالة فرعية ثابتة في الجزء العلوي من الصفحة عند الماوس فوق NAV الثابت.

أفعل ذلك عن طريق تغيير عنصر كان في وضع في السابق نسبيا لتحديد المواقع الثابتة. ومع ذلك ، ينتج هذا هامش 10 بكسل غير مرغوب فيه في IE7 و Safari.

في البداية اعتقدت أن الهامش الذي تنتجه 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 */
    }