position: fixed

5年くらい前はIEのほうがCSS対応度高かったのに最近は むしろ弱い方で困りん子ですな。IEでも同等の効果を……とか 考えるの、アホラシ。Firefox(Gecko)とw3mだけちゃんと見えてりゃいいやって 思いつつ。

position 特性の値が fixed をIEは認識しない。限られたスペースを せこせこ使うには便利なのになあ。で、普通は IE ではfixedを 諦めて absolute になるようこんなCSSを書く。下記は幅5emの メニュー用ブロックを作る場合の例。

div#menu {position: absolute; top: 0; right: 0; width: 5em}
body {padding-right: 5em}
body > div#menu {position: fixed} /* IEでは解釈できないので無視する */

上のやりかたを使った見本。 W3CのCSSページがこの手を使ってた。

そしたらIEでfixed等価にできる裏技発見。しょーもないけどメモ。
http://tagsoup.com/-dev/null-/css/fixed/

divブロックを二つにしていいならわりと単純で、下4行を足せばよい。

body {padding-bottom: 6em;}
div#menu {position: absolute; right: 0; width: 5em}
body > div.menu {position: fixed;} /* IE以外はfixedに */
div#main { /* 本文をこっちに書くことにする */
  height: 100%; overflow: auto; /* この2行がIE用に必須 */
}
body > div.main {height: auto; overflow: visible;}

上のやりかたを使った見本。

divブロックをmenuだけにするとなると…あれ、できねえ。 降参。てことで取り敢えずpcめものインデックスページだけIEでも 似た風になるようにしてみた。

叱咤激励感想ツッコミはゲストブックへ

yuuji@