ブラウザIE7のベータ版が一般公開されたそうなので早速インストールしてみた。
目的は一つ。CSSの実装状況を知りたかったこと。
まだベータ版ということなので完成系じゃないのは分かっているわけですが、自分のサイトがどのように表示されるか把握しておきたいわけです。
詳しくは
hover状態の背景が表示されない!!!!??
少し衝撃的なことが起こっているので頭が整理できていないのですが、どうもa:hover状態のときの背景画像が表示されない……
このサイトの上のナビゲーションにマウスが乗っかっても変化なし。嘘だろ…おい…。
何か設定が必要なの?ねぇ…。
それどころか、すべてのリンクのhoverに対する指定が効かない…
- この現象は2006年5月9日リリースされたIE7 Betaでは起こりません
関連：IE7 Beta2 日本語版 を入れてみた - 不思議な挙動の原因はこちらで、簡単に解説しています。
設定の仕方が悪いのか、微妙に原因わからない。
RSSのXMLが勝手にRSSとして判断されてRSS用の画面になってしまう…せっかくがんばってXSLとか使ってカスタマイズしたのに……。
何だかこのまま正式版リリースされたら涙出るかも…。
いろいろ発見したら、できるだけこの場で書いていこうと思います。
IE7の詳しい情報は本家本元IEBlogに書いてあると思います。
うう…。胃が痛い…。
a以外の要素の擬似要素(xx:hover)に対する指定がやっぱり効かない
このサイトのフッター部分(ページ一番下)はaddress要素に対して細工がしてありまして
address:hover {
中の文字の色を変える指定
}
というようなCSSを書いているのですが、現状この指定が効くのはFirefox、Opera(たぶんSafariも)となっています。で、IE7になったら対応するかなと思ったらやっぱり効かないです。
- 訂正
- a以外の擬似要素でも効くみたいです。なぜ、自分のサイトで効かないか原因を調査中です。すみません。
スターハックは効かないのですね
<?xml version="1.0" encoding="Shift_JIS"?>
というXML宣言をHTMLの頭に付けるとIE6では後方互換モードになってしまうバグは解消されたようです。
* html xx {
指定
}
Win IE4.0～6.0、Mac IEだけに指定が効くようにするスターハックと呼ばれる技ですが、IE7では効かないみたいです。その分、CSSは正しく解釈できるようになっているようなので、例えば御法度とされてきた
xx {
width: 100px;
padding-left: 30px;
}
のように幅とpaddingを同時指定する方法でも、算出されるボックスのサイズは正しく130pxとなるようになっているようです。
つまるところ、正しくボックス幅を算出できない(上記の場合のIE6後方互換モードではボックス幅をpaddingを含めて100pxと解釈する)Win IE4.0～6.0はスターハックを使って指定、IE7もしくはFirefoxなどは通常の指定をすればオールOKってことになります。たぶん。
Mac IEはボックスサイズを正しく算出できる(はず？)ので上記の場合
xx {
width: 100px;
padding-left: 30px;
}
/*\*/
* html xx {
width: 130px;
}
/**/
と指定すればどのブラウザでも同じように表示されるはず。
これは、昔から使われていたことなので今まで使っていたCSSの書き換えの必要は無さそうです。
