タグ:IE8

IE8がよくフリーズする

WindowsXP+IE8で複数タブを開いた状態で、ブラウザを閉じようとするとフリーズする!

とにかく頻繁にフリーズする!

一日2,3回はフリーズする!

IE8がよく落ちるという記事は以前書いたのですが、落ちはしなくなったけど、最近はよくフリーズします。

原因はズバリFlash Player!

またか・・・

Flash Playerのページに行き、最新版をインストールすると正常になりました。

nandani | 2010年10月22日 | コメント(0) | トラックバック(0) | アプリ関連

IEでもCSS3 その1(ie-css3)

CSS3では、ブロックの角丸やグラデーション、ドロップシャドウなど非常に便利なスタイルがあるのですが、残念なことにIEでは対応しておりません。

しかし、IEでもそれらのスタイルを使用できるプログラムがいくつか存在しています。

「ie-css3」を利用する方法。(参考サイト:コリスさんのサイト

「ie-css3」でできるCSS3機能は以下のとおりです。

  • border-radius:角丸
  • box-shadow:ドロップシャドウ
  • text-shadow:テキストシャドウ

手順

1.まずはこちらのサイトから「ie-css3」をダウンロードしてください。

2.次にスタイルにて、角丸・ドロップシャドウ・テキストシャドウの設定を行います。

.box{

padding:10px;
background-color:#FFFFFF;

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

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

}

.text{

/*テキストシャドウ*/
text-shadow: 2px 2px 2px #000000;

}

3.ブロックの角丸・ドロップシャドウについてはclass「box」、テキストシャドウについてはclass「text」という名前で設定しています。これらのclassを含んだ内容をbodyタグ内に記述してください。(以下例)

<h2>border-radius/box-shadow</h2>
<div class="box">角丸・ドロップシャドウ</div>
<h2>text-shadoww</h2>
<p class="text">テキストシャドウ<p>

4.これでFirefoxやSafariで正常に表示されるようになります。しかし、IEではまだ角丸・ドロップシャドウが表示されません。

そこで、1.でダウンロードしてきた「ie-css3.htc」をbehaviorで呼び出します。

.box{

padding:10px;
background-color:#FFFFFF;

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

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

behavior: url(ie-css3.htc);

}

.text{

/*テキストシャドウ*/
text-shadow: 2px 2px 2px #000000;

behavior: url(ie-css3.htc);

}

behavior: url("ie-css3.htcへのパス");
この一行をそれぞれの最後に付けるだけでOKです。これで「box-shadow」や「text-shadow」の記述が有効になります。

サンプル [新しいウィンドウで開く]

※サンプルでは見やすいようにタグのスタイルをあらかじめ設定しています。

なお、テキストシャドウ(text-shadow)を扱う場合は注意が必要です。

text-shadowの3番目の値を10pxにしてみてください。

text-shadow: 2px 2px 10px #000000;

通常ではtext-shadowの設定は

text-shadow:x軸 y軸 ぼかし値 色

となっているので、3番目の値を増やすと影のぼやけ方が広がるはずなのですが(現にFirefoxなどはそうなります)、IEの場合はなぜか右斜め上に影が飛んでしまいます。

Firefoxでの結果

IEでの結果

どうやらIEでは、ぼかし方があらかじめ設定されていて、3番目の値は別の役割を果たすようです(なんの役割かはわからないんですが^^;)

自分がいろいろと調整した結果、すべて2pxが、どのブラウザでみてもバランスが取れているように感じました。

text-shadow: 2px 2px 2px #000000;

ie-css3のバグレポート

  • 角丸にしたブロックの中で、さらにブロックを角丸にしようとしても効果がなく、しかもbackground-colorの効果がなぜか無くなる。
    before / after
    beforeは「ie-css3.htc」適応前、afterは適応後。本来ならグレーのブロックも角丸になるはずが、ならないどころか背景色が無効化してしまっている。
    解決方法
    どうやら後ろに隠れてしまっているようなので、内部の角丸のブロックのスタイルに

    position:relative;
    z-index:1;

    を追加してください。after2

  • ドロップシャドウ(ボックス)の色が設定できない。
    サンプルのドロップシャドウの記述は
    box-shadow: 5px 5px 30px #000000;
    ですか、仮に
    box-shadow: 5px 5px 30px #FF0000;
    としても、影の色が変わりません。after3

    色はともかく、せめて影の濃さだけでも変更したい場合は「ie-css3.htc」の86行目
    shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
    の部分の「opacity」を
    shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity=0.5)';
    という風に調整してみてください。(有効数値:0~1.0)
    とりあえず濃さだけは何とかなります。after4
    ※ただし、当然ですがすべてのドロップシャドウ(ボックス)に適応されるので、ボックスごとに濃さの調整をするというのはこの方法では無理です。

今回参考にさせていただいたサイト

nandani | 2010年07月21日 | コメント(0) | トラックバック(6) | CSS関連 | HTML関連

IE8がよく落ちる

IE8になって、なんだか落ちることが多くなりました。
まあ、IE8の場合落ちても自動回復して元の画面を開いてくれるんだけど、それにしてもうざったい。
IE6ではこんなに落ちることなかったよ?

というわけで、なんとかならんもんかなぁと思っていたら、こんな記事をみつけました。

■Internet Explorer 8がクラッシュしたり、遅くなったりしてしまったら--手っ取り早い対策
http://builder.japan.zdnet.com/news/story/0,3800079086,20407992,00.htm (builder by ZDNet Japanさん)

ふむふむ、Flashをアンインストールして、IE8をリセットし、Flashの最新版をインストールすると。
簡単ですね、よしやってみよ~。

実行したばっかりなので、よくわかりませんが、気持ちIEが軽くなった気がします。
あとは様子見ですね。

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | アプリ関連

Copyright(c) 2010 - 2017 ダリの雑記