2011.03.11

続、うるぁぁ〜IE 真解明編

うひぃ 先日、IE6は必要悪みたいな事を書いた矢先、タイミング良く?マイクロソフトがIE6撲滅キャンペーン…を打ち出しました。
www.itmedia.co.jp/news/articles/1103/07/news024.html
作った本人が撲滅とか何を言っているんだいw
IE6を考慮に入れなくて良くなれば、大変ありがたいですが。
ところで、以前なやみに悩みまくった
IE8のIE7互換表示でtableに配置した画像に謎の隙間及び、画像がずれる(うるぁぁぁ〜っシリーズ)件。
原因がわかりました。
当時は混乱の極みで記事も大変判りにくいので、整理してみたいと思います。
お急ぎの方下の方のまとめお読み下さい〜。
お急ぎでない方は、このままお読み下さい(;´Д`)ゝ。

まず、こういった現象が起こったわけです。
IE8(IE7互換表示)及びIE7もしかしてIE6も

aaaaの部分は画像。
テーブルのtd内に画像を配置して、リンク<a>を貼り、<a>をdisplay:blockでブロック化したものです。
<a>をブロック化しなければ、画像下部に隙間ができてセルが広がります。
当初IE8の仕業かと思ったのですが、IE7互換表示の仕業でした。なのでIE7のバグになるかとおもわれます。
この現象が起きたのは、cssで全称セレクタのfont-familyにメイリオを指定(注1
画像にvertical-align:bottomを指定した時です。
前回は解決策としてimgをdisplay:blockでブロック化してずれをなくす。
と、書きました。
そうすると好きなだけ、font-familyも画像にvertical-alignも指定できる、とも書きましたが、よくよく考えて見れば、ブロック化したらvertical-alignは無効となります。
おもいっきりvertical-align:bottom;が悪さをしていたという事がわかりました。
しかし、imgに対してvertical-align:bottomを指定するのは、画像を縦に並べる時に隙間が出来てしまうのを回避する為に良く使われる手段ですし、一括指定してる場合も多いかと思われます。
そしてimgをブロック化すると困る場合もあります。ちょっと不便です。
と、そこでなぜメイリオだけ(ヒラギノ無罪)こんな現象が起こるのか改めてググってみたところ、
こんなに有名な事象が。Alternative Design Projectさん
IE6/IE7のunderlineバグとのことですが、これはもしやっ?!
テキストリンクのアンダーラインが文字に掛かって打ち消し線のようになってしまう、a要素とメイリオ(ブラウザのデフォルトフォント)とvertical-alignに関するバグのようです。

>同じ行のimg要素、または包含するブロック要素(pなど)に、baseline以外のvertical-alignを指定する。
(Alternative Design Projectさんより引用)

この辺りになにか感じます。
「うるぁぁぁ〜っ」の場合、text-decoration: underlineや半角英数フォントを優先などのバグ出現要素は満たしていないのですが、どうも同じ臭いがします。

このような指定をしていたので、メイリオ指定を疑っていたのですが、

>CSSのfont-familyでメイリオを直接指定した場合は大丈夫なようだ。
(Alternative Design Projectさんより引用)

と、あり。全称セレクタのfont-familyに(注1:メイリオを指定したことが原因ではなく、あくまでもブラウザのデフォルトフォントのメイリオの問題で、もしかしてもしかすると全称セレクタでのfont-family:’メイリオ’,Meiryo;指定では、この現象を回避できないのかもしれません。

とすると、デフォルトフォントがメイリオのブラウザでも、MS Pゴシックに上書きされるので回避できるわけで、前回の検証でも効果が出たのですが、これはメイリオを使いたいのであればムダですな。
全称セレクタでfont-familyを指定せず、おのおのの要素に指定するのが良いようです。
imgはvertical-align:baseline;で運用することでも避けられるようです。
しかし、テーブルに画像を敷き詰めるにはvertical-align:bottom必須です。tableを使わないのが一番の解決策なのですが大人の事情でまだtableも健在ですし…、table以外でも色んな場面で発生しそうなバグでもあります。
大変詳しく解説して下さった Alternative Design Projectさんに、お礼を申し上げます。ありがたや〜。

■シリーズ全まとめ

【症状】

IE6/7/8におけるtableセルに配置したリンク画像の隙間、リンク画像の表示切れ

【発生条件】

メイリオがデフォルトフォントになっているIE6/IE7/IE8の互換表示で起こる。
IE8モードでは正しく表示される。

  • IE7/IE6使用時 IEのデフォルトフォントをメイリオにしている。
  • 上の条件かつ、 a img{ に対しvertical-align: beseline以外を指定している。
  • IE8使用時 気付かぬうちに互換表示(IE7)になっている。

【回避方】

  • cssで各要素にfont-familyを明示する。全称セレクタ*では回避できないかも。
  • またはimgをdisplay:blockにする。(vertical-align:bottom; を使わない方法)
  • IE8を互換表示させない。(IE7/6に対応しない場合のみ)

IE8で意図せずに互換表示になるケース

マイクロソフトの互換表示リストに使用ドメインがリストアップされている。
ツール→互換表示設定「マイクロソフトからの更新されたWebサイト一覧を含める」をチェックオフ

デフォルトでは「マイクロソフトからの〜」チェックオンで、強制的にIE7互換表示となっている。
しかし、不特定多数の閲覧側にこれを強いるのは無理。
<meta http-equiv=”X-UA-Compatible” content=”IE=8″>で対応。

DTDが書かれていないか、HTML3.0以下の文書型である。
または、HTML4.01Transitionalのシステム識別子(url)を省略している。

→IE6、IE7のQuirksモード(IE5相当)で表示されてしまうので回避する。

HTML4.01Transitionalで作成の場合、識別子は省略せず
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>とする
なお、HTML4.01Strictは識別子なしでもIE8Standardsモード。
XHTML1.0 Transitional/Strict ではXML宣言ありなし共に、IE8モード(Almost Standards/Standards)で表示。
XHTML1.1 ではXML宣言ありなし共に、IE8Standardsモード。
Nagomi’s memoさん参考になりました。凄く判りやすい!

プレビューなどローカルでHTMLを表示している。
ツール→互換表示設定「互換表示でイントラネット サイトを表示する」をチェックオフ

ここからは推察というか、蛇足。
色々と調べている内にメイリオのディセンダ(baselineより下のスペース)で問題が発生しているケースに出くわしました。
メイリオは特に広いディセンダを持っているようです。
「うるぁぁぁ〜っ」のケースでa要素をブロック化しない場合、
a要素はinline要素なのでディセンダ分の高さを確保していると思われます。line-height:0;を指定しても隙間が消えないのは、メイリオ自体に変更できないディセンダがあるので仕方ありません。
内容にあわせてセルの高さが、ディセンタ分下方向に広がるのは当然な気もします。
imgのbottomよりも、メイリオのbottomの方が遙か下にあり、隙間が生じる。
もしかしてfont-size:0;で回避できたのかもしれませんが、それも試したけどムダだったような気もします。同じ環境が無いのでテストできないのがもどかしいです。
ただ、文字が無いa要素にも文字の高さが反映されるのかどうかが、謎ですが。
そして、a要素をブロック化した時に、なぜ画像の下が切れて表示されないのかも謎のままですが(#・ж・)プン
一応、解決らしきものを見たので、ご報告まで。

「うるぁぁぁ〜」シリーズ過去の記事。興味がございましたらどうぞ。
IE8のバグではなく、IE8の互換表示でバグります。
うるぁぁぁ〜っIE8っ!vol.4 解明編
対策してみた。
うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ
うるぁぁぁ〜っIE8っ!vol.2 検証してみた
うるぁぁぁ〜っIE8っ!

2010.04.16

うるぁぁぁ〜っIE8っ!vol.4 解明編

ついに…解明いたしました。

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

非常に間抜けな結論でした。
ある意味IE8は濡れ衣を着せられていたのですが、
うるぁぁぁぁああああ!IE8ぉぉおっ!
という線は外しておりません orz
さすがIE…
結論から申し上げます。
font-familyにおいて、IE8のcss解釈に問題はございません。
犯人はずばり!

互換表示

なんのこたぁーない、IE7レンダリングモードで見ていただけなんです…
IE8ではなく、IE7以前のIEのバグだったんです…
すみません。お騒がせしました。
なぜ、それに気付いたか!ここ!大事です。
先日、「うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ」の検証用HTMLを置いてあったnifty.comからココログway-nifty.comのフォルダに移したのです。同期するのにじゃまだったので。
そしたらIE8でもずれが無く表示されるようになりました!
オマケにIE8のアドレスバーの横に互換表示のアイコンが現れたのです。
今まで表示されてなかったアイコンが何故急にでてきたんだ?
ということがヒントになり、検索の旅が始まったのでした。
なんの断りもなく、勝手に互換表示にしてくれてたのです。IE8のやつ。
互換表示のアイコンを切り替えるでもなく、なぜデフォルトでIE7レンダリングモードとなっているのか!
ここが一番の腹立ちどころです。
IE8で見ているつもりが、実質IE7で見ていたという。
それに気づかずに、2重苦で苦しめられていたのですw
バグだ〜 治らない〜 何故なんだ〜とブログに3回も書くくらいw。
理由は!niftyドメインが!

「マイクロソフトからの更新されたWebサイト一覧を含める」

に含まれておったからなのです!
そんで互換表示のアイコンも表示されず、強制的にIE7レンダリングされていたのです…はぁ…なにそれ。
詳しくはこちら参照して下さい。ありがたや〜 Tatsuの開発室さん
(ただ今、「うるぁぁぁ〜っIE8っ!vol.3」の検証用ページを 互換表示の検証用にnifty.comに戻しとります。

なので、「うるぁぁぁ〜っIE8っ!」シリーズ vol.3まではIE7以前のIE対策となっております。
誤情報を乗せたままではなんなんで、該当ブログは後ほど訂正するとして、ちょっと「IE8の互換表示」について嵌ったことをまとめてみたいと思います。

二重苦の一つ目は、上で書いた
マイクロソフトに認定されていたドメインを使用していたための苦。
マイクロソフトに認定されているという不運を背負っていないかどうかをしらべるには、
IE8のアドレスバーにres://iecompat.dll/iecompatdata.xml と入れると、リストが出てきます。
IE8のツール→互換表示設定で「マイクロソフトからの更新されたWebサイト一覧を含める」のチェックを外せばすむ(デフォルトでチェックされている)のですが、自分でサイト管理しているとかでなければ、なかなか気付かないと思われます。
まあ、マイクロソフトに認定されてなければ幸運です。

と、METAタグを追加してやれば、魔チェックの入ったIE8でもIE8スタンダードレンダリングになるようです。

…うぇぇ、全部に書くのか。htaccessに逃げたいところですが…私の使っているniftyはhtaccessは、使えんのでした。
ここが超参考になります。「IE8のレンダリングモードと互換表示
ここ読んでいて、気付いたのですが、
ただ今、余所様の「既存のサイトをお直し」しとりまして、「ん?!」と思って、DOCTYPE宣言を見ると、DTDのURL無しの 4.01 Transitional 表記でした。
どうりで、モダンブラウザ!と謡われてるはずのIE8で効かない要素があったわけです。
なんでぃ、IE8使えねぇな!と理不尽に評価されている気がしないでもありません。私のような人は他にも沢山いるような気がします。

そして二重苦、二つ目はまんまこれ〜)`ε′(

IE8が互換表示になりバグと誤解するのを回避する方法

はい、はい、まんまとひっかかりましたよ。怒髪天を衝くとはまさにこのこと。
Tatsuの開発室さんでも触れられてましたが、
これは何のことかというと、自分のハードディスクの中とかのHTMLをプレビューすると、マイクロソフトに魔認定されていなかろうが、StrictだろうがDTDのURL有りのTransitionalだろうが、自動的にIE7 Standardsモードで表示されるという。
これも互換表示設定のデフォルトでチェックされています。
「互換表示でイントラネット サイトを表示する」のチェックを外しましょう…。
例のMETAさえ書いてあれば問題ないらしいですが、この問題に気付かなければIE8用のMETAなんて追加しませんしねぇ…。
親切な(主に個人が開発してくれてる)HTMLエディタには対策してくれているものも有り。DWには望むべくも無くw

【総論】
今回のうるぁぁぁ騒動とは何だったのかというと。
まず、出向先のHTMLのプレビューがおかしかった(イントラネット苦)ので、
検証ページをつくり、
魔認定されたniftyドメインにアップして(魔認定苦)無意味だった。
どっちで見ても二度美味しい勝手にIE7 Standardsモード表示という、しょっぱいマイクロソフトの戦略に振り回されただけのことでしたとさ。
さて、IE9の噂が聞こえてきたようですが… 
今度はなんだっ?!((((゚д゚;))))) 

2010.04.12

執拗な追求

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

(22年 4月16日 加筆修正)
「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

只今実験中
display:block;したaの高さと同じ値のline-heightを与えたぞ
IE8で確認してきます…λ

2009.10.23

うるぁぁぁ〜っIE8っ!vol.3 検証結果なんぞこれ

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

前々回IE8に文句を付け、前回訂正してお詫び申し上げたんですが。
なかなか自分の環境では状況を再現できませんで、今回、やっと発生条件がわかりましたのでご報告いたす所存。
くどいですがもう一度、これまでの状況説明。

  • 画像のアイコン群をテーブルで並べてリンクを張った
  • どうしても無くならない隙間が画像の下にできる(リンクを張らなければ問題ない)
  • 画像含むa要素を display :block; にすると画像の上に謎のスペースが発生し、見切れる
  • 何故か、vertical-align:bottom;の指定を抜くと解消

まずはこちら、IE8お持ちでしたらご覧下さい。
戻ってくるリンク貼ってませんので、ブラウザでお戻り下さい。

IE8ではfont-familyの問題はありません。
問題は、niftyドメインがIE8の互換表示でIE7スタンダードでレンダリングされる現象でした。

全然問題ないよ!という場合はすみません。再現した環境は
windows XP/IE8
だす。(vistaでも不具合を確認できました。)
キャプチャを貼っときますです。
制作環境は4.01 Transitional charset=Shift_JIS (Dreamweaver CS4で作成)となっとります。
tableはcollapse。
table関連のborderは0。
ブロック化したa要素に赤いborderを指定して、画像と同じheightを持たせてあります。
IE8

Firefox 

以下は、IE7以前のIE対策となります。

結論を急ぐと発生条件は、
imgに対する vertical-align:bottom; の指定と
全称セレクタやbody に指定したヒラギノやメイリオを含むfont-familyの組み合わせ。
img の vertical-align指定が必須な場合。

と指定していたら、それを

とすると何故か解消。osakaとか入っても大丈夫です。
その後、bodyや外のボックスに対してヒラギノ、メイリオ含むfont-family指定しても何故か謎の隙間は現れません。

全称セレクタは上書きされるはずなのですが、font-familyが上書きされないような???

もっと良いのは

と特定のimg要素をブロックにしてしまうことです。(hogeはクラス指定)
そうすると、遠慮無くfont-familyも、他の画像のvertical-alignも指定できます。
vertical-alignは判るような気がしないでもないですが、なんでfont-familyが影響するんでしょうか?
line-heightあたり?
っていうか、IE8がビミョー<(`^´)>なのか、なんなのか。どっちなんだい?
safariもイケテルとはいえ、絶対的だと言う訳ではありませんからねぇ。IE8が偉いのかも

そうそう、自サイトデザインをちこっと変えたんですが、safariバグってます。
margin-rightを%指定、margin-leftをautoに指定で、不審な挙動を。
興味がおありでしたら、『さわやかまみれ』のcontactページご覧下さい。画面を横に狭めてゆくと、おもろいことが起こります。ムキーッ。(現在は起こりません)

2009.09.26

うるぁぁぁ〜っIE8っ!vol.2 検証してみた

(23年 3月11日 加筆修正)
原因が解明しました〜 ふう、何年越しだw IE7/IE6/IE8互換表示のバグです。
「うるぁぁ〜IE 真解明編」をご覧下さい。

(22年 4月16日 加筆修正)
「IE8の互換表示」がなせる技でした。IE8スタンダードレンダリングでは正常に表示されます。
加筆修正部分はこのスタイルが適用されてます。

前回ie8に文句を付けた訳ですが。
すんませんっ。
tebleの中のリンク画像がvertical-align:bottom; でずれるのか、簡単なソースで検証してみたら全く問題ありませんでした。
一応、検証用に作ったページをアップしてみました。IE8環境のある方はご覧下さい。
tableの中の<a><img></a>の表示
濡れ衣だったということが判ります。

「マイクロソフトの互換表示リストに使用ドメインがリストアップされている。」に該当するniftyのサイトに上げ直したので、もしIE8/IE7以前のバージョンとメイリオをお使いであれば再現されるかもしれません。

訂正してお詫び申し上げます。
でも依然もとのページはvertical-align:bottom;を残すと、IE8では表示が変なままなのれす。
overflow:hidden;的な挙動がこちらのバグと似てるので、どっかのa要素のbackground指定が継承されちまってるのかなぁ。
とにかく、正しくない情報を提供して申し訳ありません。
今のところ判っているのは
・問題のあったソースでは、img{vertical-align:bottom;} の指定が無い場合、正常に表示する。
ちゅーことだけです。
次回の出向で原因を明らかにしたいところなんですが、とりあえずは解決してるし…
もやもやするっす。

PageTop