Question

我在IE11中的以下页面上进行转换时遇到问题：http://www.polygongroup.com/be/ons-team/。

在悬停时，它应该转换背景颜色并转换超过120毫秒。这适用于Firefox，Chrome和Edge。在IE11中它没有。

如果我删除了transition-duration属性，背景颜色和转换开关会立即悬停 - 所以这些属性都可以。 li周围的边框确实会改变颜色，因此肯定会触发悬停状态。 IE开发人员工具还显示正确的属性值。这就像转换持续时间在某种程度上无限长。

这可能是愚蠢的，但我看不到它。

代码摘录：

<ul class="team-lijst">
    <li><img src="http://www.polygongroup.com/be/files/2015/07/sarah_driesen.jpg" alt="sarah driesen"  title="" />
    <p>Sarah Driesen<br />
        Sales en Marketing<br />
        <a href="mailto:sarah.driesen@polygongroup.com">sarah.driesen@polygongroup.com</a></p>
    </li>

的CSS：

<style type="text/css">
    ul.team-lijst {list-style-type: none; margin: 0; padding: 0;}
    ul.team-lijst>li {width: 200px; height: 200px; float: left; margin: 10px;position:relative;border-radius: 5px;border:1px solid #eee;overflow:hidden;}
    ul.team-lijst>li>img {width: 200px; height: 200px; position: absolute;left:0px;top:0px;}
    ul.team-lijst>li>p{font-size: 13px; line-height: 1.4; display:block; margin: 0; padding: 1px 5px 0px 5px;width: 200px;box-sizing:border-box; height: auto; position: absolute;left:0px; bottom: 0px;transform: translateY(16px); background-color:rgba(255,255,255,0.6);text-overflow: ellipsis;overflow:hidden;transition-duration: 120ms;-webkit-transition-duration: 120ms;}
    ul.team-lijst>li>p:first-line{font-size: 14px;font-weight:bold; }
    ul.team-lijst>li>p>a{font-size: 13px; }
    ul.team-lijst>li:hover{border-color:#2980b9}
    ul.team-lijst>li:hover>p{transform: translateY(0px); color:#fff;background-color:rgba(41,128,185,1.0);}
    ul.team-lijst>li:hover>p>a{color:#fff;text-decoration: underline;}</style>

在IE11中悬停的过渡似乎有无限的持续时间

0 个答案: