make :active 在 IE 的子节点上工作答案

【问题标题】：make :active work at the children node in IEmake :active 在 IE 的子节点上工作
【发布时间】：2014-01-18 12:48:21
【问题描述】：

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 确实可以像其他浏览器一样完美运行。

但是，如果我在 or 区域上按下鼠标，IE 不会像 productCss:active 写的那样将边框更改为 3px。

我可以只使用 css 解决这个问题吗？

【问题讨论】：

你试过加.productCss {width:100%;}吗？
@kleinfreund 你永远不会知道 IE。总是值得一试的，不是吗？顺便说一句，我知道块应该始终是全宽，这就是为什么我把它作为评论而不是答案。
对于 kleinfreund：我正在通过 IE9 进行测试。对于 joeytje50：我试过了，但没用。 IE 对我来说总是一个问题制造者。

标签： css internet-explorer internet-explorer-9 pseudo-class

【解决方案1】：

案例1：.productCss在边缘被点击

它可以在 IE 和其他浏览器中使用。 :active 状态为真

案例 2：figure 被点击

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

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

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

【讨论】：

同意，似乎 :active in css in IE 不会像 javascript 那样执行事件冒泡。
hmm...既然已经过去了2天没有人回答这个问题，我认为这只能通过javascript来解决......