html - css 转换在 IE11 中 100% 的时间都不起作用

Question

如果你去这里http://jsbin.com/dibobapaluti/1/edit由于 css 转换，您会看到链接在 1 秒后发生变化。

如果您在 IE11 中打开该链接，您会注意到，如果您将鼠标悬停在链接上的速度非常快，则会跳过 1s 过渡，并且该链接会立即更改其颜色和背景颜色。

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

你知道这是不是一个错误？

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 而不是它的悬停状态。

我不确定这是不是一个错误，因为处理 experimental property 的浏览器之间的行为不同。 .

元素在光标离开时不再处于悬停状态，将 transition 放在 a:hover 上会产生意想不到的效果。请注意，在上面的示例中，当您将光标从元素上移开时，它会在没有过渡的情况下快速回到其非悬停状态。将过渡移动到 a 会在悬停状态不再处于事件状态时反转动画，如下面的演示所示。

下面的demo在IE11下没有问题。

CSS/HTML/演示

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>