×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
なんかわくわくされたので、自分のための覚え書きも兼ねて書いておきます。
というか色々お見苦しいところをお見せして申し訳ない；；
というか色々お見苦しいところをお見せして申し訳ない；；
+ + +
今回はまったIEのバグは３つ。
１．センタリング
ブロック要素のセンタリングは、通常は
{ margin : 0 auto; }
でいいんですが、IEはこれが効きません。
それでどうするかというと、センタリングしたい要素の外側に、
<div style="text-align:center;"></div>
をかませます。
これだけ。
ただし、このdivで囲んだ部分全てのテキストやらなにやらもセンタリングされてしまうので、各所にtext-align:leftやらrightやらを指定する必要があります。
追記。
ブロック要素がtext-alignでセンタリングされるのはIEのみのバグなので、その他のブラウザ用に { margin : 0 auto; } もきちんと指定しなきゃダメですよ、と。
２．pngの画像が見えない
特定のソフトでpng画像を保存すると、ガンマ値とかいう、画像の明るさ？色の濃度？に関係するパラメータが書き込まれるんだそうです。
これを、通常はブラウザだかモニタだかが適当な数値に補正して表示してくれるそうなのですが、IE6とかSafariなんかでは、不適切な値で表示するらしくて。
それで真っ黒だったらしいです。
この辺のことはさらっとしか調べてないので上記内容も怪しいですが、「IE png」とか「png ガンマ値」とかでぐぐれば色々出てくると思います。
３．二段組
ブログの記事部分とメニュー部分、サイトもぱっと見縦二分割になってますが、このデザインについて。
IEでのみ、右側のメニューが左側の記事の下に表示されてしまったりしました。
原因は、まぁバグなのでしょうが、因果関係が不確定なので起こったことをありのままに話すぜ。
段組にするためfloatを使用。
ブログの記事部分とメニュー部分はそれぞれdivでくくられていますが、それらを更に、まとめてdivでくくる。この時、それぞれのdivにwidthを指定。
記事width＋メニューwidth＝外側divのwidth、が理想だと思うんだけども、必ずしもそうでなくでも大丈夫みたい。うちのブログは現状イコールではないです確か。でも勿論内側≦外側で。
サイトの段組も、IEでは右が左を微妙に圧迫してると思うんですが、これも同じ手で直せないかなーと試行錯誤中。
上に書いた以外にも色々条件があるようで、なかなかうまいこといきませんorz
段組デザインバグの解決策は、他にも色々あるようです。
詳しいことは「IE float」とかでぐぐればいいと思います。
尚、この辺りでmarginを使うとバグにはまりまくるらしいので、余白の指定はpaddingがお勧めのようです。
+ + +
後細かいことを言えば、cssの最初に
* { margin:0; padding:0; }
を入れておくといい感じかもとか（これは基本ですかもしかして）。
tableでフォントサイズ指定すると、それが入れ子指定になってた場合、ブラウザによって挙動が覿面に違うとか。
Operaのスクロールバーのデザインは、bodyで指定してDOCTYPEはurl消した互換モードでできるよとか。
こんな感じでございました。
総括すると、本当に、IEはいい加減にしたらいい。ってことかな！
+ + +
+ + +
ご報告、どうもありがとうございました。
今日はきちんとIE6で確認しましたけども、やっぱり今までが今までだったので、他の環境ではどうなんだ！とドキドキでした＞＜。
あー、頑張った甲斐があった！
愚痴は、やー、あはは^^;
テンパリ具合をお楽しみ頂けたかな！
……みっともないところをお見せして本当に(ry
エントリー、消えてました？ 気付かなかった^^;
そちらのはなんかシステムが複雑っぽいですよね。
が、頑張って下さい……！
IE6が少ないというのは羨ましいような……でも作成環境がIE6ならIE6多い方が安心かもですね。
うちは、最近四ヶ月ではIE7と8が同数くらい、IE6がその倍で、圧倒的にIE6が強いようです、が。
ここ一ヶ月だけ見ると、IE6と8が同数くらい、IE7がその半分、な感じになりつつあります。
OSがおそらくVistaのIE7ユーザーは徐々にIE8に移行しつつあるけど、おそらくXPのIE6ユーザーはそのまま使い続けてる、のかな？
IE8が増えてるのは確かなような気がしますが、IE6の強さは単純にIE6ユーザーにリピーターが多いとかいう話かもですね。これだけじゃ分からないですね。
SafariユーザーもそこそこいらっしゃるようだけどこれはMacかな。Win版のSafariとは挙動が違うかな。前一回入れたけどアンインストールしちゃった。
Mac、実はうちにないではないけど、OS8か9で、IE5とかじゃないのかな……もう10年くらい前の。きっと何の参考にもならない！
けど、Macでの挙動も気になるので、うっかり繋がれることがあったらいつか試すんだ……（今Macは箱の中。多分もう出て来ない。）
今回はまったIEのバグは３つ。
１．センタリング
ブロック要素のセンタリングは、通常は
{ margin : 0 auto; }
でいいんですが、IEはこれが効きません。
それでどうするかというと、センタリングしたい要素の外側に、
<div style="text-align:center;"></div>
をかませます。
これだけ。
ただし、このdivで囲んだ部分全てのテキストやらなにやらもセンタリングされてしまうので、各所にtext-align:leftやらrightやらを指定する必要があります。
追記。
ブロック要素がtext-alignでセンタリングされるのはIEのみのバグなので、その他のブラウザ用に { margin : 0 auto; } もきちんと指定しなきゃダメですよ、と。
２．pngの画像が見えない
特定のソフトでpng画像を保存すると、ガンマ値とかいう、画像の明るさ？色の濃度？に関係するパラメータが書き込まれるんだそうです。
これを、通常はブラウザだかモニタだかが適当な数値に補正して表示してくれるそうなのですが、IE6とかSafariなんかでは、不適切な値で表示するらしくて。
それで真っ黒だったらしいです。
この辺のことはさらっとしか調べてないので上記内容も怪しいですが、「IE png」とか「png ガンマ値」とかでぐぐれば色々出てくると思います。
３．二段組
ブログの記事部分とメニュー部分、サイトもぱっと見縦二分割になってますが、このデザインについて。
IEでのみ、右側のメニューが左側の記事の下に表示されてしまったりしました。
原因は、まぁバグなのでしょうが、因果関係が不確定なので起こったことをありのままに話すぜ。
段組にするためfloatを使用。
ブログの記事部分とメニュー部分はそれぞれdivでくくられていますが、それらを更に、まとめてdivでくくる。この時、それぞれのdivにwidthを指定。
記事width＋メニューwidth＝外側divのwidth、が理想だと思うんだけども、必ずしもそうでなくでも大丈夫みたい。うちのブログは現状イコールではないです確か。でも勿論内側≦外側で。
サイトの段組も、IEでは右が左を微妙に圧迫してると思うんですが、これも同じ手で直せないかなーと試行錯誤中。
上に書いた以外にも色々条件があるようで、なかなかうまいこといきませんorz
段組デザインバグの解決策は、他にも色々あるようです。
詳しいことは「IE float」とかでぐぐればいいと思います。
尚、この辺りでmarginを使うとバグにはまりまくるらしいので、余白の指定はpaddingがお勧めのようです。
+ + +
後細かいことを言えば、cssの最初に
* { margin:0; padding:0; }
を入れておくといい感じかもとか（これは基本ですかもしかして）。
tableでフォントサイズ指定すると、それが入れ子指定になってた場合、ブラウザによって挙動が覿面に違うとか。
Operaのスクロールバーのデザインは、bodyで指定してDOCTYPEはurl消した互換モードでできるよとか。
こんな感じでございました。
総括すると、本当に、IEはいい加減にしたらいい。ってことかな！
+ + +
+ + +
ご報告、どうもありがとうございました。
今日はきちんとIE6で確認しましたけども、やっぱり今までが今までだったので、他の環境ではどうなんだ！とドキドキでした＞＜。
あー、頑張った甲斐があった！
愚痴は、やー、あはは^^;
テンパリ具合をお楽しみ頂けたかな！
……みっともないところをお見せして本当に(ry
エントリー、消えてました？ 気付かなかった^^;
そちらのはなんかシステムが複雑っぽいですよね。
が、頑張って下さい……！
IE6が少ないというのは羨ましいような……でも作成環境がIE6ならIE6多い方が安心かもですね。
うちは、最近四ヶ月ではIE7と8が同数くらい、IE6がその倍で、圧倒的にIE6が強いようです、が。
ここ一ヶ月だけ見ると、IE6と8が同数くらい、IE7がその半分、な感じになりつつあります。
OSがおそらくVistaのIE7ユーザーは徐々にIE8に移行しつつあるけど、おそらくXPのIE6ユーザーはそのまま使い続けてる、のかな？
IE8が増えてるのは確かなような気がしますが、IE6の強さは単純にIE6ユーザーにリピーターが多いとかいう話かもですね。これだけじゃ分からないですね。
SafariユーザーもそこそこいらっしゃるようだけどこれはMacかな。Win版のSafariとは挙動が違うかな。前一回入れたけどアンインストールしちゃった。
Mac、実はうちにないではないけど、OS8か9で、IE5とかじゃないのかな……もう10年くらい前の。きっと何の参考にもならない！
けど、Macでの挙動も気になるので、うっかり繋がれることがあったらいつか試すんだ……（今Macは箱の中。多分もう出て来ない。）
PR