IE6のpadding margin問題を解決する

IE6のpadding margin問題には泣かされた。
解決法は以下だ。

●widthとpadding marginを一つのブロックに同時に当てない。
つまり

<div width用>
<div padding用>
コンテンツ
</div>
</div>

と入れ子にすればいい。
これに気がつくまでに1年かかった。

追記: XHTMLのstrictでは上の方法でもうまくいかなかった。
直前のwidthをinheritしてしまって、padding分太ってしまうのだ…

で、下のjavascriptを発見した。ちょっと古いかもしれないが、うまく機能してくれる。
このjavascriptをヘッダーに入れて、CSSは

win/ie5.5.css

のようなディレクトリを作っておいてあげればいい。
CSSの内容は、修正をかけたいところだけの記述をしてあげればいい。

<script Language="JavaScript"><!-- os = getOSType(); browser = getBrowserName(); version = getBrowserVersion();
if (os == "MacOS") dirName = "mac/";
if (os == "Windows") dirName = "win/";
if (os == "UNIX") dirName = "unix/";
if (browser == "Netscape") dirName += "nn";
if (browser == "Explorer") dirName += "ie";
if (browser == "Safari") dirName += "saf";
if (browser == "Opera") dirName += "op";
if ((version >= 1) && (version < 2)) dirName += "1.css";
if ((version >= 2) && (version < 3)) dirName += "2.css";
if ((version >= 3) && (version < 4)) dirName += "3.css";
if ((version >= 4) && (version < 5)) dirName += "4.css";
if ((version >= 5) && (version < 5.5)) dirName += "5.css";
if ((version >= 5.5) && (version < 6)) dirName += "5.5.css";
if ((version >= 6) && (version < 7)) dirName += "6.css";
if ((version >= 7) && (version < 8)) dirName += "7.css"; document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>"); // --></script>

ここを参考にした。
http://www.openspc2.org/reibun/javascript/browser/014/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA