FireFoxでドロップシャドウが消えてない

ブログのデザイン設定してもChromeでしか確認してなかった事に気づいてIEとFireFoxで確認したら悲しいことに左のウィジェットの枠が残ってた。
どうやらこいつはJavaScriptがやっていてブラウザごとに色々面倒な処理をしているっぽい。
で、FireBugで見てみたらこんなスタイルが設定されてました。

Firefox でガジェットの枠が残っている状態

-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2)

Chromeの時は↓だったのでブラウザごとになんかやってるんだなと気づいた次第であります。

-webkit-box-shadow

というわけでこいつを解除するように追記。

テンプレートデザイナー > アドバンス > CSSを追加

.sidebar div#CustomSearch1,
.sidebar div#HTML2,
.sidebar div#HTML3
{
padding:0;
margin:0;
border:none;
background-color:transparent;
margin:0px -16px;
padding:0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}

最後の一行がその対応です。これで無事反映されたことを確認しました。

Firefox 上で枠とシャドウが消えた

まだIEとかも確認が必要だなぁ。でも眠いのでまた今度。