この記事は公開から１年以上経過しており、内容が古くなっている可能性があります。
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;」と書けばよいみたい。
コメント