擬似クラスの色設定がIEのみ効かない

質問

基本的に画像に対して全てボーダーを0にし、ボーダー色も変更設定しました。
そして一部の画像のみボーダー5pxをつけることにしました。
画像にはリンクがあり、マウスオーバーした際にはボーダー色を変えることにしました。これがsafariやfirefoxではちゃんとできたのですがIEだけなぜか色指定が効きません。ボーダー5pxはついているのですが
#cccにもならず、#60fにもならず困っています。
個別性、優位性の問題でしょうか？
よろしくお願い致します。

img{ border:0px; }
a{ color: #60f}
a:visited{color: #60f}
a:active{color: #60f}
a:hover{text-decoration:underline; color: #60f}

#oya .gazou{ margin:3px 0px 0px 0px; border:5px solid; }
#oya a.line{ color:#ccc; text-decoration:none; }
#oya a.line:hover{ color:#60f; text-decoration:none; }

<div id="oya">
<ul>
<li>
<div class="hoge">
<a href="#" class="line"><img src="hoge" class="gazou"></a>
</div>
</li>
</ul>
</div>

回答No.2

steel_gray · ベストアンサー

#1です。
IEでは前景色→border-colorのカスケード処理が抜けているだけのように思いますが。

前回の回答で全てのブラウザでうまくいきませんか？
念のためにスタイル全体を書きます。
img{ border:0px; }
a{ color: #60f}
a:visited{color: #60f}
a:active{color: #60f}
a:hover{text-decoration:underline; color: #60f}

#oya .gazou{ margin:3px 0px 0px 0px; border:5px solid #ccc; }/*この行修正*/
#oya a.line{ color:#ccc; text-decoration:none; }
#oya a.line:hover{ color:#60f; text-decoration:none; }
#oya .line:hover .gazou{ border-color:#60f; }/*この行追加*/

お礼

再度回答頂きありがとうございます。できました！
書き足りない所があっただけで、すっきり解決です。
すいません。
ほんとにありがとうございます！

回答No.1

steel_gray

border-color省略時の解釈がIEは間違ってるようですね…

省略せずに指定するしかないんじゃないでしょうか？
#oya .gazou{ margin:3px 0px 0px 0px; border:5px solid #ccc; }
/*border-colorの指定を追加*/

#oya .line:hover .gazou{ border-color:#60f; }
/*こちらはセレクタごと追加*/

お礼

回答ありがとうございます。

いろいろ試してみたのですが、IEでうまくいけば、safariやfirefoxではサイズのおかしなボーダーが発生したりで統一した書き方ではダメなんですね。きっと。
でも一体何が原因でこうなるなるのか不思議です。