为什么我的CSS在IE10中不起作用？

Question

以下适用于所有主流浏览器，但不适用于IE10

CSS：

.box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
}
.box:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 108px;
    height: 108px;
    border: 2px solid red;
    display:none;
}
.box:hover:after {
    display:block;
}

HTML：

<div class="box">hover me</div>

jsFiddle

Answer 1

管理在Windows 8上的IE10中复制此内容。

似乎IE10并不喜欢悬停在div上（或任何不是链接的东西）。如果您将元素更改为a（并在其上设置display: block），则可以正常工作：

http://jsfiddle.net/vhWgA/

<a class="box" href="#">hover me</a>

当然，如果您需要.box成为div，那么只需添加一个处理悬停的链接。 E.g：

<div class="box"><a href="#">hover me</a><div>

Answer 2

为悬停属性添加空样式。它会在那之后起作用。

.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
}
.box:after {
content:"";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 108px;
height: 108px;
border: 2px solid red;
display:none;
}
.box:hover{} /* This is additional */
.box:hover:after 
{
display:block;
}

DEMO

注意：仅在Windows 7 IE10上会出现此问题。看起来像微软的bug。在Windows 8中正常工作。