タグ:IE9
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;」と書けばよいみたい。
nandani | 2013年06月14日 | コメント(0) | トラックバック(1) | CSS関連
IE9ベータ版の動作
先日windows7が入っているノートパソコンが手に入ったので早速IE9ベータ版をインストールしてみました。
で以下の画像がIE9ベータ版の画像です。
ぱっと見、とってもすっきりしています。
他のブラウザと見比べるとGoogleChromeに近い気がしますね。アドレスバーに検索ワードを入れて検索するタイプだし。ちなみにその時の検索エンジンはもちろん「Bing」です。
ニュースなどでもいわれている通り、速度も結構上がっている気がしますね。特にjavascriptの動作が思いのほかスムーズに動いてくれていました。
ただ、まだまだベータ版ということで不具合もいくつかあります。例えば
- このワードプレスの本文入力画面にカーソルが合わせられない(=文章が入力できない)
- Yahooニュースにある「みんなの感想」のレーダーチャートがまともに表示されない。
- Googleアナリティクスのグラフの線が表示されない。
まあjavascript関連のバグはIE8でも初期段階でありましたから、まだまだこれからでしょうね。
それにしても、IE9の致命的なところはXPで使えないことでしょう。IEがOSのアップグレードをうながす牽引役になれるとは到底思えいないし、IE9が完全に普及するのには相当時間がかかるでしょうね~。
HTML5もCSS3もメインで使われるのはまだまだ先な気がします。
nandani | 2010年09月26日 | コメント(0) | トラックバック(0) | アプリ関連
IE9ベータ版でCSS3テスト
先日ノートパソコンが手に入り、それのOSがwindows7だったので早速IE9ベータ版をダウンロードしてインストールしてみました。
で、CSS3の動作をチェックしてみたのですが、以下がその結果画像です。
実際にIE9ベータ版をインストールしている方はこちら:サンプル
見事にIE9ではCSS3に対応していますね~
ただし!対応しているのは
- 角丸
- ドロップシャドウ
- マルチプルバックグラウンドイメージ
のみで、以下のスタイルには対応できていません。
- グラデーション
- ボーダーイメージ
- テキストシャドウ
単に記述方法が違うだけかもしれませんが。
ともあれ、まだまだベータ版ということなので今後に期待します。
nandani | 2010年09月25日 | コメント(0) | トラックバック(1) | CSS関連