CSS选择器：在IE8中点击子元素时无效答案

【问题标题】：CSS selector :active not working on child element click in IE8CSS选择器：在IE8中点击子元素时无效
【发布时间】：2011-12-10 20:49:42
【问题描述】：

我有以下 HTML 结构：

<div id="ctr__Wrapper" class="wrapper">
    <div id="ctr" class="control clickable">
        <img src="logo.png">
    </div>
</div>

还有下面的 CSS：

.control
{
    border: 1px solid #000;
    background-color: #666;
    padding: 20px;
}

.control:active
{
    background-color: #bbb;
}

当我单击元素“ctr”时，我看到背景颜色发生了变化，但是当我单击图像本身时，它没有。这在 Firefox 中运行良好，但在 IE8 中不行。有什么办法可以在 CSS 中解决这个问题。

工作示例可以在这里看到： http://jsfiddle.net/miljenko/DNMPd/

【问题讨论】：

标签： html css internet-explorer-8 css-selectors

【解决方案1】：

因为 http://jsfiddle.net/jalbertbowdenii/DNMPd/12/

【讨论】：

它在 IE8 中不起作用，它与原来的行为相同。 div-click 上的背景变化，而不是 img-click 上的变化。
我的坏人，没有添加 href 属性。我在这里更新了它：jsfiddle.net/jalbertbowdenii/DNMPd/13
您是否尝试点击图片，而不是背景 div/a？
第一个陈述显然是错误的，:active 开始在 IE8 中处理非锚元素。这里的错误是完全不同的......
我们都错了； ie8 与 :active 结合使用时存在负 z 索引元素的错误

【解决方案2】：

您可以使用背景图片代替真实图片。

html:

<div id="ctr__Wrapper" class="wrapper">
    <div id="ctr" class="control clickable">
    </div>
</div>

css:

.control
{
    border: 1px solid #000;
    background-color: #666;
    height: 40+height-of-logopx;
    background-image:url(logo.png); background-repeat:no-repeat;
    background-position:20px 20px;
}

.control:active
{
    background-color: #bbb;
}

【讨论】：

我知道这一点，但项目的具体性质需要这种结构。无论如何+1，如果我可以应用它，这将解决问题......
如果没有更好的答案，我会接受这个。我想在 CSS 中没有办法在保持结构的同时做到这一点。
我猜（但我现在没有时间测试它），您可以在使用不可见（透明）图像时使用旧结构，z-index:0 和 z-index:veryhigh它周围的 div。您也可以使用 1x1 像素大小的不可见图像。