css - IE8 の疑似要素ホバーの背景色

Question

私は（さらに別の）IE8のバグと戦っています。

基本的に、私は小さな正方形のコンテナを持っており、その中に矢印があり、:before と :after 疑似要素が組み込まれています。HTML は次のようになります。

<div class="container">
    <div class="arrow" />
</div>​

そしてそのためのCSSは

.container {
    height: 58px;
    width: 58px;
    background-color: #2a5a2a;
}

.arrow {
    padding-top: 7px;
}

.arrow:before {
    margin: 0 auto;
    content: '';
    width: 0;
    border-left: 12px transparent solid;
    border-right: 12px transparent solid;
    border-bottom: 13px gray solid;
    display: block;
}

.arrow:after {
    margin: 0 auto;
    content: '';
    width: 12px;
    background-color: gray;
    height: 14px;

    display: block;
}

ここで、コンテナーにカーソルを合わせると、その中の矢印の色が変わるようにします。このCSSを追加しました：

.container:hover .arrow:after {
    background-color: white;
}

.container:hover .arrow:before {
    border-bottom-color: white;
}​

そして、そこから問題が始まります。これはほとんどのブラウザーで機能しますが、IE8 では background-color プロパティはオーバーライドされません。そのため、新しい色の矢印の先端のみが得られますが、「本体」を構成する正方形は得られません。

さらに面白くするために、以下を追加してコンテナの背景色を少し異なるものに変更すると、すべてが機能し始め、矢印の背景色が変わります!

.container:hover {
    background-color: #2a5a2b;
}

コンテナの :hover ステータスのみを設定し、すでに持っているのと同じ背景色を設定した場合、それは機能しません。背景色を変更したい場合は、変更する必要があります。

試してみたい場合は、jsfiddle をご覧ください: http://jsfiddle.net/Ke2S6/現在、ホバー時のコンテナーと同じ背景色になっているため、IE8 では動作しません。1桁を変更すると、機能し始めます。

それで...何かアイデアはありますか？