Question

HTML和样式如下：

<style type="text/css">
    .header {
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        background: #AAA;
    }
    .menu {
        position: relative;
        float: right;
        margin-right: 100px;
    }

    ul {
        display: none;
        position: absolute;
        top: 100%;
        height: 50px;
        width: 100px;
        background: #CCC;
        color: #C00;
    }
    .menu:hover ul {
        display: block;
    }
</style>
<div class="header">
    <div class="menu">
        <a>HOVER~</a>
        <ul><li>SHOW ME!!</li></ul>
    </div>
</div>

标题位置固定，菜单位置绝对，简单代码在我的IE8中运行良好。但菜单在在线版本中是不可见的，似乎菜单溢出并由父母隐藏，这应该不是。我试过切换CSS规则或设置z-index，仍然无法弄清楚问题。

Answer 1

据我所知，问题不在于发布的代码，如果你做了一个小提琴，一切正常（也在ie）。我认为问题（我在ie9中也有它）是类中的样式规则：.sub-header。这是您的原始代码：

.sub-header {
    height: 32px;
    border-bottom: 1px solid #1B1B1B;
    background-color: #2B2B2B;
    background-image: -moz-linear-gradient(bottom,#3B3B3B 0,#2B2B2B 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0%,#3B3B3B),color-stop(100%,#2B2B2B));
    background-image: -webkit-linear-gradient(bottom,#3B3B3B 0,#2B2B2B 100%);
    background-image: -o-linear-gradient(bottom,#3B3B3B 0,#2B2B2B 100%);
    background-image: -ms-linear-gradient(bottom,#3B3B3B 0,#2B2B2B 100%);
    background-image: linear-gradient(bottom,#3B3B3B 0,#2B2B2B 100%);
    /* the following line should be removed, wrong syntax and causes height/display problems */
    *filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF3B3B3B,endcolorstr=#FF2B2B2B)url(0/);
    background: url(http://img.yesneaker.com/img/common/gray-stripe.png) #3B3B3B repeat;
    background: url(http://img.yesneaker.com/img/common/black-circle.png) #222 repeat fixed;
    background: url(http://img.yesneaker.com/img/common/header-bg.png) 50% 0 #2B2B2B repeat;
}

问题是过滤器（首先在行的末尾有一个错误 - 网址），其次，渐变过滤器和元素的高度存在一些问题 - 尝试删除它并查看它是否有效

在IE8中，绝对定位菜单无法显示在固定标题中

1 个答案: