- ベストアンサー
アコーディオンのフォントがIEのみ適用にならない
- 以下のソースなのですが、Firefox/Operaはスタイルシート指定のメイリオ表示なのですが、IE8で閲覧すると文字がぼやけて表示されます。
- どこに原因があるでしょうか？
- よろしくお願いいたします
- ryoryu2002
- お礼率100% (1346/1346)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
[ANo.3] の補足に対する回答ね。 opacity=100 を opacity=50 に換えてみるとわかるけれど、 filter:alpha を有効にするには、hasLayout を true にする必要がって、 でも、 filter:alpha と hasLayout=true のときは「フォントの縁を滑らかにする」が無効になるので 論理的に無理。 なので filter:alpha をあきらめる。 または、 透明度を持ったブロック要素を上からかぶせてごまかす。 <div style="position:relative;width:20em;height:5em;"> <div style="width:100%;height:100%;"> <p>width:100%;</p> </div> <div style="position:absolute;top:0;background-color:white;width:100%;height:100%;opacity:0.5;filter:alpha(opacity=50);"> </div> </div>
その他の回答 (3)
- dscripty
- ベストアンサー率51% (166/325)
IE8 以下の実装の不備だとおもうよ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>IE8 以下の実装の不備</title> <style type="text/css"> body { font-family:meiryo, sans-serif; } </style> </head> <body> <div style="width:20em;filter:alpha(opacity=100);"> <p>width:20em;filter:opacity(alpha=100);</p> </div> <div style="filter:alpha(opacity=100);"> <p>filter:opacity(alpha=100);</p> </div> <div style="width:20em;"> <p>width:20em;</p> </div> </body> </html> 関連 hasLayout Property http://msdn.microsoft.com/en-us/library/ms533776%28v=vs.85%29.aspx
お礼
どうもありがとうございました。
補足
原因追及ありがとうございます。 IE8以下へ実装するには具体的にどのようにすればよいのでしょうか？ お聞きしてばかりで申し訳ないです。。。
- 4017B
- ベストアンサー率73% (1336/1814)
＞IEに限り表示されるものなので、諦めるしかない～ まあ端的に言えばそうなりますね。 つ～か前述の通り、HTMLでのフォントは基本、閲覧者側のブラウザ環境に完全依存なので。IEとFireFoxで見た目を完全に統一する事自体が最初から無理。仮に font-family:"メイリオ"; などと指定した所で、世の99％のWindows＋IE環境のPCにはメイリオフォントがインストールされてないので（半強制的にDefaultフォントの "MS Pゴシック" で表示されます）。 ただIEで「ClearTypeをOFF」にしているにも関わらず、滲んだようになるというのが少し解せません。必ず理由と原因はあるのですが、オンラインではこれ以上は分りません（私は国家エスパー免許を持っていませんので）。 可能であれば、全く別の環境PCで見てみて。それでも同じ様になるのなら、作ったHTMLページ（JavaScript）に問題有り。他のPCでは正常に表示される様であれば、お使いのPC環境独自の問題だと類推出来ます。
お礼
どうもありがとうございました。
補足
早速の回答ありがとうございます。 一度サンプルを下記へアップしてみました。 http://street.s51.xrea.com/test/ ご確認の程、お願い申し上げます。 タブを開いた中のコンテンツがアンエリがかからないのです。 よろしくお願いいたします
- 4017B
- ベストアンサー率73% (1336/1814)
ざっと見た感じ、JavaScript内で特にフォントを指定している箇所がない様に見受けるので。これはJavaScriptの問題では無く、単に表示してるブラウザ側の問題。つまり各ブラウザのDefaultのフォント指定の問題かと。 自分はメインでIE使ってないので確証は無いですが。確かIE7くらいの時分のver.Upで、フォントにアンエリをかけて擬似的にきれいに見せる仕様が追加されてたはずです。しかしながらIEはDefaultのフォントが「MSPゴシック」なので、あまりきれいに表示されず非常に不評を買っていたと記憶してます。 念のため、IEの設定で ・[ツール] →インターネットオプション →詳細設定 →マルチメディア ～と進んで、下の方にある項目の「HTMLで常にClearTypeを使用する」のチェックを外してみて下さい。フォントのアンエリが解除され、くっきりと見える様になると思います。 それで改善しなかったら、まあIEには良くある事と思って先に進みましょう。
お礼
どうもありがとうございました。
補足
早速の回答ありがとうございます。 既にClearTypeを使用するのチェックは外れておりました。 IEに限り表示されるものなので、諦めるしかないでしょうか・・・ よろしくお願いいたします
お礼
大変参考になりました。 ありがとうございました。