Hair Dryer が故障して温風でない。
が、コレはコレでいいかも…（笑
2006年6月アーカイブ
昨日、と言うか今日の早朝のこと、また突然 IE がおかしな表示をし始めた。
「h1，h2 要素の背景画像が消える、幾つかの li 要素の背景画像が消える」という症状。
一応、簡単に検索掛けてはみたが、それらしいものは見当たらなかったように思う。順位が下の方にあるのかも知りませんが、「Win-IE の未確認バグか？」と思いつつ、解決策を模索。
取り敢えず、height を指定することで解決に至る。
それで、解決したところで原因をあれこれ考えてみたわけですよ。
どうやら、以下の 4 つの条件が重なると起こるらしい。
（ある要素 A に指定した背景画像が消える場合を考える。）
- 要素 A を包含するボックス B が存在し、ボックス C に包含されている。
- 要素 A を包含するボックス C に { height: ***; } が指定してある。
- 要素 A を包含するボックス C に { position: relative; } が指定してある。
- { line-height: ***; } のみで高さを指定した要素 A に { background-image: url(***); } を指定。
今回はすぐに自己解決したので良かったんですが、この手の検索はキーワードが分かりにくい。何か良いバグ投稿用のフォーマットは無いものか…
一定のフォーマットで Web 上に置いてあれば、キーワードも限定され、該当するバグと解決方法がすぐに見つけられると思うんだけど。
今は検索するより、自分でイロイロ試す方が早い。
だから有名なバグ以外は殆ど知らないわけですが… まぁ、普段からバグが発生しやすいようなデザインやコーディングをしないので問題ないんですが、デザイン決定後に HTML の構造が変更になると今回のように知らないバグに遭遇するわけです。
しかし、やってくれるよ、IE も。
自分のサイトならともかく、お仕事となるとそう笑ってばかりもいられませんね。
PS. { display: none; } として印刷以外では表示されないように考えていたものを、Mac-IE のマージンや Win-IE の誤ボックスモデルを同時に解決するために空間に利用した。HTML の構造変更に伴い、なかなかトリッキーというか変なことをしている今日この頃。
2006年6月現在のテンプレート [samurai_bamboo_r] をバイトで CSS 書き直したり、画像をスライスしなおしていたついでに、軽量化してみた。
重かった原因は、ヘッダの画像が一枚もので 24bit PNG だと、約 140kB あったからなんですけどね。
自宅の環境では、多少重いかな？程度で大して気にしていなかった（といってもサイズの大きい画像だったから重いのは予想できた）んですが、自宅以外の環境で見てみるとスクロールがもたつく… あまりの重さに驚いた（この手の重いデザインは何度か作ってますが…）ので、軽量化に乗り出したわけです。
StyleCatcher 用な為、MT のデフォルトテンプレートを使っているので、素晴らしい入れ子構造を利用して、JPEG や 8bit PNG 等の形式の分割した画像にして CSS を書き直しました。
取り敢えず、変な記述をしているのは、またまた Win/Mac IE がそれぞれに微妙なバグを発揮してくれた為です。
ちなみに、128kbps では 7 秒台という状態だが、56kbps だと 22 秒程度掛かり、8 秒ルールに思いっきり引っ掛かるらしい。今時 8 秒ルールを気にして作っている人が居るかどうかは知りませんが、大したこと書いていない私はほぼ気にしていません。流石に自宅の環境（下り 5～5.5 Mbps）で 8 秒以上掛かるとなると考えますが。
えっと、イロイロすべきことがあるんですが、バイトもあるんですよね…
それで、{ position: absolute; } を使って IE で困ったので、書いておこうかと。
まず、今回はHTMLの構造にも以下のような要望（指定）がありました。
- [logo]
- [content]
- [navigation(main)]
- [navigation(sub, etc.)]
- [footer]
元々 [navigation(sub, etc.)] は上部にレイアウトするデザインだったので、ロゴの直下に持ってきていて、個人的に「表示上、上に来るものは先に書けばいい」という方針なのですが、構造的にも SEO 的にもこの方がベターと言われたので、コレで。
で、結局チョットアレンジして以下のようにしていました。
- [logo]
- [skipper]
- [content]
- [navigations
- [navigation(main)]
- [navigation(sub, etc)]
- [footer]
ここで、[ ] はブロックレベル要素で、中は id 名のようなモノ。 [skipper] はコンテンツとナビへ移動するもの（ページ内リンク？）で、{ display: none; } を適用。（後で { visibility: hidden; } or { text-indent: ***; }, etc. に変えるかも ）
取り敢えず、この状態のHTMLで、以下のようなレイアウトを再現。
再現できたことは出来たんですが、まず Mac-IE で問題発生です。
#nav(sub, etc.) を { position: absolute; } で配置したわけですが、{ position: relative; } を指定した #wrapper ではなく、#nav(main), #nav(sub, etc.) を覆う div 要素を基準としてしまい、Mac-IE ではヘッダ部分のレイアウトがうまくいきませんでした。
仕方が無いので、以下のように HTML を変更して解決。
- [logo]
- [skipper]
- [content]
- [navigation(main)]
- [navigation(sub, etc.)]
- [footer]
まぁ、予想通りというかなんと言うか、ココまではいいんですよ。
問題はここからで、Win-IE で #nav(sub, etc.) が消滅しました。何処にもレンダリングされないんですよ。
原因はよく分かりませんが、{ float: ***; } を指定したボックスの直後のボックスに { position: absolute; } を指定すると起こるらしい。
[navigation(sub, etc.)] の中身を「この要素を表す適当なタグは無いから div にしてしまえ」と、やや強引な div 中毒気味なソースから、「リンクリスト」という解釈に変えた時点から発生し、元に戻しても直らなかったので、起こるかどうかは不定なバグらしい。
で、「どうやって解決したか」ですが、あまりスマートとは言えない方法で、改行タグを入れて解決しました。
直後のボックスに { position: absolute; } を指定しなければ良いようなので、直後に何かテキトウに要素を置けば解決します。構造的に何を置いても見えなくなるはずなんですが、挙動がおかしくなって困ったので、{ display: none; } を指定したんですが、直後の要素が無いことになってしまってダメで、{ visibility: hidden; } だとやはりレンダリングがおかしくなってダメ。
と言うわけで、<br /> を入れて解決に至る。
最終的なソースは以下のようになりました。
- [logo]
- [skipper]
- [content]
- [navigation(main)]
- <br />
- [navigation(sub, etc.)]
- [footer]
取り敢えず、一件落着。
ちなみに、私は { position: absolute; } な指定でレイアウトするのは「トリッキー」ってことにしていますが、どうなんでしょうね。まぁ、個人的にあまり使わないようにしています。
まぁ、こんな感じでほぼ全ての Web ブラウザで同じ見栄えですね。
個人的には、[navigation(sub, etc.)] はヘッダとしてロゴとまとめておきたかったんですけどね… っていうか、元々そうしていたんですが、後で要望があって修正になりました。実際、SEO 的な効果はどうなんでしょうね。私は、ほぼ無いに等しいと思っていますが。
