Question

我正在制作一个下拉菜单。我的工作在chrome，opera和firefox上顺利运行。但IE存在问题。我正在使用::before和::after Pseudo-Elements制作菜单上方有一个类似箭头的三角形，它将在父母的悬停事件中显示。为了使转换工作，我在我的代码中使用了overflow: hidden;属性。

以下是代码：

//here's the css:
#container
{
opacity: 0;
overflow: hidden;
position: absolute;
top: 45px;
width: 305px;
height: 0px;
background: rgb(99,98,98);
border: 2px solid #363636;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-transition: all linear .3s;
transition: all linear .3s;*/
-webkit-transition: opacity linear .3s, top linear .3s, height linear .3s;
-moz-transition: opacity linear .3s, top linear .3s, height linear .3s;
transition: opacity linear .3s, top linear .3s, height linear .3s;
}

#classes:hover #container
{
overflow: initial;
height: 200px;
opacity: 1;
top: 60px;
-webkit-transition: opacity linear .3s, top linear .3s, height linear .0000001s;
-moz-transition: opacity linear .3s, top linear .3s, height linear .0000001s;
transition: opacity linear .3s, top linear .3s, height linear .0000001s;
}

#container::after
{
    display: block;
    content: "";
    position: absolute;
    top: -14px;
    right: 20px; 
    width: 0;
    height: 0;
    border-bottom: 15px solid #626161;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

#container::before
{
    display: block;
    content: "";
    position: absolute;
    top: -17px;
    right: 18px;
    width: 0;
    height: 0;
    border-bottom: 17px solid #464545;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
}

#container ul
{
    position: absolute;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    width: 300px;
    top: 5px;
    right: 2.5px;
    list-style: none;
    margin-top: 0px;

}

#container ul > li
{
    display: list-item;
}

#container ul > li a
{
    padding-top: 2.5px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2.5px;
    height: 30px; 
    border-bottom: 1px solid #5f5f5f;
    border-top: 1px solid #4f4e4e;
    width: 300px;
    font-family: bkoodak;
    font-size:large;    
}

#container ul > li a:hover
{
    height: 30px;
    padding-top: 2.5px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2.5px;
    width: 300px;
    font-family: bkoodak;
    background-color: #2cc427;
} 

//here's a dummy html

<div>
    <div id="classes"> DROPDOWN
    <div id="container">
        <ul>
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
        </ul>
    </div>
    </div>
</div>

问题是除了IE之外的每个浏览器都在container上方显示类似箭头的形状。除了在容器上方添加另一个div并放置形状之外，是否有人知道解决此问题的方法有？

Answer 1

您使用的是哪个版本的ie？并非所有ie版本都支持伪类

尝试使用selectivzr http://selectivizr.com/

或http://www.webresourcesdepot.com/use-css3-pseudo-selectors-with-ie-ie-css3-js/

第二种解决方案对我来说效果很好。

当'div'有overflow：hidden属性时，IE不会显示:: before和:: after内容

1 个答案: