0

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，仍然无法找出问题所在。

4

1 回答 1

0

据我所知，问题不在于发布的代码，如果您对其进行摆弄，一切正常（也在 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;
}

问题是过滤器（首先在行尾有错误 - url），其次，渐变过滤器和元素高度存在一些问题 - 尝试将其删除，看看它是否有效。

于 2013-01-05T10:38:12.427 回答