-->
./
<!-- フラ&#65533;ュが見れな&#65533;のためにここに何か書&#65533; --> フラ&#65533;ュがインス&#65533;&#65533;ルされて&#65533;&#65533;たいで&#65533;&#65533;&#65533;

2009年10月25日

Internet Explorer8に合わせてさくらのブログのCSSを修正

前々から気になっていたのですが、ようやくうまく出来たみたいです。8より前のバージョンについては確認も出来ないのですが、たぶん大丈夫ではないかと思っています。自分はFirefoxをメインに使っていてそちらでは問題がなく、他の代表的なブラウザでも目立った不具合はありませんでした。

 しかし、一番利用者が多いはずのInternet Explorerで、一部表示が崩れていたので気になっていたのです。Firefoxでも3.0.5あたりのバージョンではInternet Explorerと同じような現象が出ていました。
 逆にInternet Explorerに合わせてレイアウトを決めると、他のブラウザで表示がおかしくなっていました。具体的にはInternet Explorerで下に下がりすぎていた部分が、他のブラウザでは上がりすぎて他の画像と重なって表示されていたのです。

 なお、調べてみたところ、昨年2008年のデータみたいですが、ブラウザの利用率はInternet Explorerがおよそ8割、Firefoxは5%強とのことでした。ブラウザによってCSSの解釈に違いがあるそうです。

 主な変更点は次の二カ所です。テンプレートに修正を加えているので、そのまま当て嵌まるようなことはないと思いますが、参考程度にはなると思います。

本文部分
#content {
padding-left:15px;
margin-top:0px;
margin-bottom:30px;
float:left;
width:800px;
color:#746659;
text-align:left;
   position: absolute;
   top: 160px;
   left: 240px;

}

左サイドバー部分
#links-left {
font-weight:normal;
width:200px;
float:left;
   position: absolute;
   top: 93px;
   left: 40px;
text-align:left;
}
 他に細かいところの修正も必要になるかもしれません。

Internet Explorerでの表示
xp-shot000039
xp-shot000039 posted by (C)hirono-hideki


 注意点として、読み込む画像の大きさが大きすぎるとレイアウトが大きく崩れてしまいます。マージンやパディングのサイズを大きくした分、親要素のブロックの横幅も大きくする必要があるとのことです。

http://blog-tips.net/article/112658818.html
に詳しく書いてあり、大変参考になりました。




Powered by ScribeFire.



この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/33182160

この記事へのトラックバック