コーダーにとって、常にイラっとさせられるie6対策ですが、
今回も、ま～たie6に対するグチのようなエントリです。

最近、分かりやすく、比較的カスタムもサクサク出来るajaxのサンプルが様々なサイトで配布されています。
当然、ゼロからjavascriptを組むことのできないヘッポココーダーの自分としてはありがたくバリバリ使わせていただいております。

あちらこちらのサイトで、よく使われているポピュラーなギミック系イメージビューワと言ったら
lightboxかshadowboxだと思いますが、個人的には軽かったり、画像以外（フラとか）も使えたり、
カスタムしやすかったりなどの理由でjQuery + shadowboxという組み合わせが好きです。 んで、その組み合わせで、またもや引っかかったのがie6...

皆さんご存じの通り
通常、サムネイルをクリックすると、ブラウザに対してセンタリングされて画像が表示されます。
ザックリとした仕組みは、javascriptによりブラウザサイズを取得して、 その数値に合わせたcssと、htmlソースをbody閉じタグ直前に吐き出す。って感じでしょうか。
具体的なデフォルトcssは、ページへのマスク処理をposition:absolute; top left z-index background:#000; opasity:0.85;などを使用して、絶対位置にてブラウザサイズ全てを黒く（アルファ85％）覆いかぶせて、
画像のベース部分にはposition:fixed; センタリング用にtop: width:などを使っています。

んで、なんやかんやで、微調整などをして組み終えて、ブラウザ検証してみるとでもie6だけ、変な位置に表示してくれちゃいます...いつもの如く、軽く落ちます。

これがMacIE5とかなら、見なかったことにして、作業を進めますが、未だに『3割、4割当たり前～！』な
ie6を軽視することも出来ず、原因と対策を探すというなんとも無駄な作業に入ります。

表示上、おそらく肝になるのがposition:fixed;だろうと安易に考えてましたが、
そこは流石に、自分の脳みそでは到底及びもしない天才が作ったライブラリだけあって
「ie6のposition:fixed;対策なんてしてあるに決まってるじゃないか～」とアッサリ撃沈。
しかし、表示上fixedが効いてないのは間違いはなく思われ...とりあえず
cssにて、#shadowbox_container要素にie6だけ認識するアンダースコアハック、expressionなどを 使用して、スクロール量をabsolute要素の現在位置に加算する方法の 下記の2行を加えて絶対位置指定をしてあげ、見た目的に誤魔化してみます。
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+表示させたい縦位置));

しかし、根本的な解決ではないし、縦に長くサムネイルなどを配置するデザインの場合はOUTですね。

一応プロなので当たり前ですが、やはり、その場しのぎではなくて、
根本的な解決策を見つけ出さなければならないようで
イロイロとjavascript、cssイジくってみます...全く解決の気配すらなく、
途方に暮れかけていた時に、何気にゼロからテストページを作って検証してみたら
スクロール時にカクカクと不自然に気持ち悪く動く以外は、全く問題なくie6でも
shadowboxが適応されちゃってます...
css、javascriptはデフォルトのままなので、問題点は今まで考えもしなかったhtmlです。
しかし、至って普通な
<a rel="shadowbox[typeA];options={counterType:'skip'}" href="0.jpg" title="Photo">
<img src="00.jpg" alt="Photo" class="fade" /></a>
こんなんだけですし、間違えようもなく...
気持ち悪いな～とか思っていたら、何気に1箇所だけ違いがあることに気づきました！
xml宣言です！（<?xml version="1.0" encoding="utf-8"?>←こうゆうの）
テストページは、DreamWeaverの新規テンプレで作ったのでxml宣言が入っていなかったんです。
んで、恐る恐る宣言文入れてみたら、変な位置に表示してくれちゃいました！

ようやく原因が分かって、あとは対策を考えるだけだと思い、浮かれ気味にイロイロ調べたり、イジってみた結果
ie6にて、後方互換モードとして解釈されると何故かcss（javascriptにて）のposition:fixedが無効になるようで、
泣く泣くxml宣言を外して標準準拠モードにしてあげるか、ie6を無視するかの2択って悲しい結論に達しました...
最終的に、今回のデザインでは問題なさげだったので、絶対位置指定で誤魔化すパターンで濁しました。
とてつもなく、ドッと疲れが出ました。
渋滞が嫌で、一生懸命ウラ道などを駆使して、走り回ったのに
到着時間が一緒だったってぐらい、ドッと疲れが出ました。

これって、何か良い解決策はないのでしょうかね？

ついでなんで、今回の根本的な原因となったxml宣言について。
『xhtml文書にはxml宣言を記述する事が強く奨励されています。』
xml宣言の有無によって、W3Cの仕様に準拠する標準準拠モードか、
正しく解釈しない古いブラウザ用の後方互換モードかの切り替えが行われます。
しかしie6ではDOCTYPEの前に文字が存在する（たとえxml宣言であっても）と、
後方互換モードになってしまうという恐ろしいバグがあります。

このお陰さまでcssにも多大な影響を発揮してくれちゃいます。
・img要素のpaddingが有効にならない
・text-alignの指定がインライン要素だけでなく、ブロック要素にも反映される
・ブラウザデフォルトの文字サイズがひと回り小さい、つまりsmallがmidium相当
・widthとheightの値にpadding、borderのサイズも含めてしまう
・margin: auto;でブロック要素のセンタリングが出来ない
などと、主にはブロック/インライン要素、margin、padding、borderの解釈の違いや、font-sizeの違い。
こんな感じででしょうか...
こうゆう微妙な意地悪をie6にされながら、仕事をしてきたので、通常のサイト構築では ie6対策なんて今では、さほどストレスを感じないようになってきましたが
久々に『ヤラレタ』って感じがしました『やっぱり、お前は凄いヤツだよっ』
と、改めてie6の恐ろしさを実感する今日この頃です。