html - 位置：固定；在其下方添加少量空白

Question

http://tylerh.info，我有一个固定的导航栏。但是每当我使用属性“位置：固定；” 它在它下面留下了少量空间，导致我的标题不与它接壤。但是，这不会发生在取出属性的情况下。

谢谢！

CSS：

.qmmc .qmdivider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
position:relative;
z-index:1;
}

.qmmc .qmdividery{
float:left;
width:0px;
}

.qmmc .qmtitle{
display:block;
cursor:default;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;
}

.qmmc {
position:relative;
z-index:10;}

.qmmc a, .qmmc li {
float:left;
display:block;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmmc div a, .qmmc ul a, .qmmc ul li {
float:none;
}

.qmsh div a {
float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}




    #qm0    
    {   
                background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        padding-bottom: 4.5px;
        position:fixed;
        border-color:#A2BFE9;
        margin-top: -4.7em;
        position:fixed;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #00A3EF;
    }


    #qm0 a  
    {   
        text-align: center;
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 18px;
        padding-right: 18px;
        color:#FFFFFF;
        font-family:Karla;
        font-size:100%;
        text-decoration:none;

    }


    #qm0 a:hover    
    {   
           background-image: -moz-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -ms-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -o-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -webkit-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   border-bottom-color:#000000;
   border-bottom-style:solid;
    }


    body #qm0 .qmactive, body #qm0 .qmactive:hover  
    {   
        background-color:#808080;
        text-decoration:underline;
        font-size: 80%;
    }



    #qm0 div, #qm0 ul   
    {   padding-top:4px;
        padding-bottom:4px;
        margin:0px 0px 0px -1px;
        background-color:#808080;
        border-width:4px 1px 1px;
        border-style:solid;
        border-color:#285DA8;
    }



    #qm0 div a, #qm0 ul a   
    {   
        padding:2px 40px 2px 5px;
        border-width:0px;
        border-style:none;
    }



        #qm0 div a:hover, #qm0 ul a:hover   
        <ul id="qm0" class="qmmc">

div#header {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 1px;
    /*gradients */
    background-image: -ms-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #006AD4), color-stop(1, #2500A1));
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: radial-gradient(circle farthest-corner at center, #006AD4 0%, #2500A1 100%);
    /*end gradients*/
    border-bottom: solid 2px #808080;
    padding-top:60px;
}

html:

<li><a class="qmparent" href="/">Home</a></li>
<li><a class="qmparent" href="/?page_id=7">Ask a Question</a></li>

<li><a class="qmparent" href="javascript:void(0)">Menu3</a>

    <ul>
    <li><a href="javascript:void(0)">Placeholder1</a> </li>

    <li><a href="javascript:void(0)">Placeholder1</a></li>

    <li><a href="javascript:void(0)">Placeholder2</a></li>
    <li><a href="javascript:void(0)">Placeholder3</a></li>
    <li><a href="javascript:void(0)">Placeholder4</a></li>
    <li><a href="javascript:void(0)">Placeholder5</a></li>
    <li><a href="javascript:void(0)">Placeholder6</a></li>
    </ul></li>


<li><a class="qmparent" href="javascript:void(0)">Categories</a>

    <ul>
    <?php wp_list_categories('title_li=&orderby=name&use_desc_for_title=1&hierarchical=1') ?>

    </ul></li>{ 
        text-decoration:underline;
    }

score 3 · Accepted Answer

您网站上的 css 和 html 有一些问题。

<h6>在您的 html 顶部有一个空白。我看不出这有什么用。这也是你的标题被推下的原因。尝试删除它。
您的固定菜单顶部有边距。这在固定定位的元素上是不可能的。删除这个。还要在此处设置 top: 0 以强制菜单到位。（也不允许使用 4.5px 的填充。屏幕上不存在将像素减半的事情）
给标题一个 50px 的 padding-top，与菜单的高度相同。这使它直接安装在manu下方。

那应该可以解决您的问题。无论如何，在 Chrome 代码检查器中为我工作。

也许您可以尝试在 W3C 网站上验证您的 css 和 html，因为它可能存在更多问题。

score 1 · Accepted Answer

用（添加）替换您的div#header条目padding-top:60px：

div#header {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 1px;
    /*gradients */
    background-image: -ms-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #006AD4), color-stop(1, #2500A1));
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: radial-gradient(circle farthest-corner at center, #006AD4 0%, #2500A1 100%);
    /*end gradients*/
    border-bottom: solid 2px #808080;
    padding-top:60px;
}

以及您的#qm0条目（已删除margin-top:-4.7em）：

#qm0 {    
    background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    padding-bottom: 4.5px;
    position:fixed;
    border-color:#A2BFE9;
    position:fixed;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #00A3EF;
}

并<h6></h6>从上面的 HTML中删除<ul id="qm0" class="qmmc">。

score 1 · Accepted Answer

我有同样的问题。应用于position:fixed元素后，以某种方式将边距8px应用于父元素，因此我将父元素的样式设置为margin:0，并且已解决。（Chrome）

这是示例

<body style="margin:0"><!-- the parent element -->
    <div style="position:fixed:background-color:grey;width:100%">
        Hello World
    </div>
</body>

margin:8px浏览器使用时的解释position:fixed

html - 位置：固定；在其下方添加少量空白

3 回答 3

Related

Reference