make：在IE中的子节点处激活工作

Question

HTML ：

<div class="productCss">
    <figure>
        <img src="pic/products/pullet00001.png" alt="this is a picture">
        <figcaption>some product word2</figcaption>
    </figure>
</div>

CSS：

.productCss {
    border: black 1px solid;
}

.productCss:hover {
    border: blue 2px solid;
    cursor: pointer;
}

.productCss:active {
    border: blue 3px solid;
    cursor: pointer;
}

Demo

此问题仅发生在IE中。

当我的光标移动并且鼠标按在空白一侧时，IE确实像其他浏览器一样完美。

但是，如果我鼠标按下或区域，IE不会将边框更改为3px，因为productCss：active write。

我可以仅使用css解决此问题吗？

Answer 1

案例1：点击边缘.productCss

• 适用于IE和其他浏览器。 :active状态为真

案例2：点击figure

强调我们设置figure { border: 1px solid red; }

• 适用于其他浏览器。 :active状态为真
• 它在IE中不起作用。

这是为什么？我猜IE的行为如下：我们不点击.productCss，而是figure。因此，只有figure具有:active状态，而不是父div。