在IE11中,css转换在100%的时间内不起作用

Question

如果你去http://jsbin.com/dibobapaluti/1/edit,你会看到链接在1秒后因css转换而改变.

如果您在IE11中打开该链接,您会注意到如果您非常快速地悬停链接,则会跳过1s过渡并且链接会立即更改其颜色和背景颜色.

如果您在Google Chrome中执行相同操作,则无法看到该问题,无论您将鼠标悬停在链接上的速度有多快,都会应用1s转换规则.

你知道这是不是一个bug？

a {
    display:block;
    width:130px;
    border:1px solid black;
    background-color:#617ACC;
    color:white;
    padding:3px;
    text-decoration:none;
}
#main-nav {
    padding-left:0;
}
li {
    margin-top:11px;
    list-style:none;
}
a:hover {
    background-color:red;
    color:black;
    width:200px;
    transition-duration:1s;
}
a:link:hover {
    font-size:18px;
}
a:visited {
    color:black;
}

<p>test</p>
<ul id="main-nav">
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ..." target=_blank>About me</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">My adventures</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Want to travel too?</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Contact me</a>
    </li>
</ul>

Answer 1

您应该应用转换a而不是其悬停状态.

我不确定这是一个错误,因为处理实验属性的浏览器之间的行为不同.

该元件处于悬停状态不再是瞬间光标离开它,并把transition上a:hover将会有意想不到的影响.请注意,在上面的示例中,当您将光标移离元素时,它会在没有过渡的情况下快速回到非悬停状态.a当悬停状态不再有效时,移动过渡以反转动画,如下面的演示所示.

下面的演示在IE11中没有问题.

CSS/HTML/Demo

a {
    display:block;
    width:130px;
    border:1px solid black;
    background-color:#617ACC;
    color:white;
    padding:3px;
    text-decoration:none;
    transition-duration:1s;
}
#main-nav {
    padding-left:0;
}
li {
    margin-top:11px;
    list-style:none;
}
a:hover {
    background-color:red;
    color:black;
    width:200px;        
}
a:link:hover {
    font-size:18px;
}
a:visited {
    color:black;
}

<p>test</p>
<ul id="main-nav">
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ..." target=_blank>About me</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">My adventures</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Want to travel too?</a>
    </li>
    <li><a href="e.g. '/about/index.html'" title="e.g. 'Information about the company ...">Contact me</a>
    </li>
</ul>