IEのposition/float回りには色々と爆弾があって、どういわけかwidthとの相関性が深いのだが、今ちょっとpositionでサイドメニューを調整しているときに引っ掛ったバグについて書いておく。
メインとなる部分をmargin-leftで余白を作り、そこにposition:absoluteでサイドメニューを置きメインのマージンと同じだけ幅を指定する。これで普通なら構造上は後に書いたメニューを本文左に持って来れるわけだが、IEの場合は何故か予定より右に表示されてしまう。
いろいろテストしたところ、どうもposition指定要素にwidthを同時指定するとwidth分右にずれて表示するというバグのようだ。つまりはunderbar hackあたりを使ってwidth分leftにマイナス値を入れれば良い。
これはmargin/paddingのように「仕様の差」と言い張れないこともないものと違って明らかなバグである。本来ならこんなものはブラウザ供給側が修正すべき部分であって個別対応するべきものではないと思うが、なにぶん国内では9割のシェアを持つ環境だけに無視できないのが歯痒い。
テストコードを示す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="">
<title>test</title>
<style type="text/css">
* {margin: 0; padding: 0; }
div#head,div#foot { background: #ccc; }
div#body { position: relative; }
div.main { margin-left: 25%; border-left: 1px solid red; }
div.sidebar { width: 25%; position: absolute; top: 0; left: 0; _left: -25%; }
div.sidebar-test { background: #ddf; }
</style>
</head>
<body>
<div id="head"><h1>test</h1></div>
<div id="body">
<div class="main">ここは適当に</div>
<div class="sidebar">
<div class="sidebar-test">ここが変</div>
</div>
</div>
<div id="foot">end</div>
</body>
</html>ここでは互換モードで例示したが標準モードで動作するstrictでも同様であった。
もう一つ、問題の要素、もしくはその親要素にborderを表示させると正しい位置に収まる場合が多い。原因はまったく不明だが、どうやらboxの状態を明示させないと手抜きしている節がある。
これもunderbar hackでIEのみに表示させるのが適当。
