make :active work at the children node in 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

This problem is only happened in IE.

When my cursor move in and mouse press on the blank side, IE does work perfectly like other browsers.

However, if I mouse press on the or area, IE does not change the border as 3px as productCss:active written.

Can I solve this problem using css only?

Answer 1

Case 1: The .productCss is clicked on the edge

• it works in IE and other browser. The :active state is true

Case 2: The figure is clicked

For emphasis we set figure { border: 1px solid red; }

• it works in other browsers. The :active state is true
• it doesn't work in IE.

Why is this? I guess IE acts as follows: We don't click the .productCss, but the figure. Therefor only the figure has the :active state, not the parent div.