| ブログトップ | CSS関連 |

IE9でドロップシャドウ(box-shadow)が効かない

table内に記述しているaタグに、角丸とドロップシャドウをかけてボタンっぽくしたのですが、なぜかIE9でドロップシャドウが効かない状態になりました。

スタイルの記述はこんな感じ


table a{
position:relative;
z-index:1;

background-color:#FFF;
display:inline-block;
text-decoration:none;
padding:3px 8px;
margin:5px 5px 5px 0px;

-moz-border-radius: 5px; /*FireFox*/
-webkit-border-radius: 5px; /* Safari and Chrome */
border-radius: 5px; /* Opera 10.5+, IE */

-moz-box-shadow: 1px 1px 3px #777; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #777; /* Safari and Chrome */
box-shadow: 1px 1px 3px #777; /* Opera 10.5+, IE */

behavior: url("/PIE.htc");

}

「position:relative」も「z-index」もちゃんと記述しているのに効かない。

というか角丸はちゃんと効いてるのに、なぜドロップシャドウだけ効かない?

他の場所で使っているドロップシャドウはちゃんと効いてるのに。

・・・もしや、と思い該当のaタグをtableから出してみたところ、

・・・効いた!

tableタグ内に記述したタグにはドロップシャドウをかけられないのかな?と思い調べてみると、こちらのサイトを発見しました。

IE9でborder-collapse: collapse指定要素内でbox-shadowが表示されない! | ブログデザイン

どうも、tableのスタイルを「border-collapse:collapse;」にしているとダメみたい。

なんでやねん・・・

その部分のtableのみスタイルを「border-collapse: separate;」とし、解決しました。

【追記】 というかtable自体にではなく、ドロップシャドウをかけるタグのスタイル(この場合aタグ)に「border-collapse: separate;」と書けばよいみたい。

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2013年06月14日 | コメント(0) | トラックバック(1) | CSS関連

トラックバック

トラックバックURL

トラックバック一覧

[…] そこで見つけたのが「IE9でドロップシャドウ(box-shadow)が効かない | ダリの雑記:WEBプログラ…という投稿記事。どうやら table に border-collapse の設定に左右されるようです。ちょっと引用しておきます。 […]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記