June 24, 2009
IEでの表示がおかしいのを今更
普段は、FirefoxとSafariを利用しているのです、私。それなので、IEからどのように見えているか、分からなかったんです。
ふと思い、立ち上げてみるとどうやら…googleの広告上でhoverしてしまうと、書き込んだ内容も、一緒にblinkしてしまい、表示がヘンになるようです。
最近いろいろとcssをいじっていたので、いつぞやのように、そこでエラーでも生じておかしくなってるのかとも思ったんですが、前述のFirefoxやSafariではそのようなことが起きないんです。仕方ないので、cssを位置から見直すことにしました。
まず、私の使っているテンプレートは liquid piano(2カラム)
なんですが、素のcssをセーブしてみました。そして比較対象に、同系列の liquid smoke(2カラム)
をチョイスしてみました。
じっくり観察すると同系列なのに、大きな違いを発見。
[liquid piano.css、* html .main の下辺りの、.posted 宣言内]
.posted{
position: relative; /* for ie6 Peekaboo Bug */
font-size:11px;
text-align:right;
padding-top:5px;
background:url(http://parts.blog.livedoor.jp/img/usr/liquid_piano/center_line.gif)
repeat-x 50% 0%;
}
この1行が、 liquid smoke
にはないんです。そして .menu 宣言内にも同様のプロパティがあり、おかしいと思い、まずは ie6 Peekaboo Bug
とは何ぞや〜ということで調べました。
にこにこ風味
さんの所で、そのものずばりIE6 の“Peekaboo Bug”
と銘打って書かれていたのを読んでみました。
確かに liquid piano
内にfloatプロパティを使用しているところがいくつかあります。ただですね、それは liquid smoke
にも使われているんですよ?? でも、そちらでは、上記の回避法である、position: relative 宣言はしてないんです。ヘンですね〜
今度はその liquid smoke
を導入してみると…
あら不思議。IE(但し8ですけど)でも記事がblinkしませんですよ! これは一体どう言うこと?!
それで…この結果を受けて、大抵のIEはもう7になっているだろうと決めて(苦笑)、IE6用のバグフィックスは外してみることにしたんです。
まぁ当然のことなんですが、 liquid smoke
同様 liquid piano
でも、記事のblinkバグはなくなりました。
その他、リンク関係を少しいじりまして、こんな感じにしたんですが…
livedoorさんはこういった症状を知っているんでしょうか。取りあえず検索はしたけどヒットしなかったって事は、こんなのは簡単なんだからユーザーが直せ、って感覚なのかな。でも、テンプレ公開しているモノで、同系統は直してあるのに、これだけ放置って言うのもどうかと思います。ぷんぷんw
 |
|
| blog ranking banners | |
