- 2011-06-26 (日) 1:59
- HTML+CSS+JS | Web
もう古いけど、前は役になったのでメモとして残しておきます。
IEでよくおこるCSSの問題は、おもにhasLayoutが影響している。
hasLayoutについては。ウノウラボさんのhasLayoutとは何かの説明がわかりやすいので参考に。
すべてをtrueにしてしまうと問題もおこる。
- IEは、ul や ol のリストマークは、hasLayoutがtrueだと消えてしまう。
- IE6 や IE7 で垂直方向の margin が相殺されない。
hasLayoutをtrueにして、くずれを防ぐ
hasLayoutが原因で、IE7が拡大・縮小したときにレイアウトが重なってしまったり、フロートした要素がはみ出てしまったりする場合がある。
対処方としては、下記のいずれかを追加すればいい。
- display:inline-block;
- height:1%;のようにheightに数値をいれる。
- float
- position:absolute;
- widthに数値をいれる。
- zoom:1;
- writing-modeにtb-rlを指定
peek-a-boo Bug
IEで、float に内包されたコンテンツ、または float 要素に接する背景やborderなどが一部表示されなくなるというもの。
下記のいずれかで、解決できる。
- floatを含むコンテナにline-heightを指定する。
- floatの親要素にwidthまたはheightを指定する。
- floatに含まれる要素にposition:relativeを指定する。
- floatの親要素に「heigh:1%」を指定する。
外側のブロック要素に、border-leftとpadding-bottomを定義するとおこるhasLayoutのバグ
対処方法は、zoom:1;を指定するか,IEのみにheight: 1%;指定する。
ネガティブマージン
画像をあえて枠からずらして配置させたい場合などに使える。
例
position:relative;
/zoom:1;
margin:0 -100px 0 0;
例
<div id="main" style="600px; background="#999" /*背景色は、確認用*/">
<div style="margin:0 -100px 0 0; width:700px; position:relative; background="#CCC" /*背景色は、確認用*/>testtesttesttest</div>
</div>
IE6のみ背景が表示されないときの対処
zoom:1;を指定する。親のboxにposition:relative;を指定していた場合になったりするらしい。
padding-top値がIE6とIE7だけ倍になるのを修正
floatプロパティを指定した要素に、後続の要素が回り込まないようにclearプロパティを指定することよくある。
後続の要素にpadding-topを指定すると、IE6,7だけ余白があきすぎることがある。この場合、後続要素にzoomかwidthを指定すると調整できる。
ie6余白の解消
haslayoutのトラブルで、リンクにdisplay:bloack;を指定すると下に余白が生じる。
ie6用にaタグにzoom:1;などhaslayoutをtrueになるような指定をすることで解決する。
floatなしで横並びIEにはdisplay: inline; zoom: 1;をつける
li{
display:inline-block;
margin-right: 0.5em;
}
* html li {
display: inline;
zoom: 1;
}
IE6でpngを使う
imgに適用
ie6png.gifというファイル名の透過gifをpngファイルと同じディレクトリにおかないといけない。
* html img{ /* IE-expression (first-child) */
behavior: expression(
this.style.filter = this.src.match(/\.png$/) ? "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')" : this.style.filter,
this.src = this.src.match(/\.png$/) ? this.src.slice(0, this.src.lastIndexOf("/")+1) + "ie6png.gif" : this.src,
this.style.behavior = "none"
);
}
背景に適用
* html div{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}
AlphaImageLoaderを使う
div{
background:url(○○.png);
}
* html div{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='○○.png');
srcは、htmlファイルからのパスを指定（ルートパスが無難）
zoom:1;
}
* html div a{
cursor:pointer;
position:relative;
}
半角英数字の文字列を折り返す（IE6以外もオッケー）
.word_wrap {
word-wrap: break-word;
}
詳細は、Webtech Walkerさんの最近はword-breakするのにJSは使わないほうがいいみたいを参考に
インラインフレームの背景を透明にする
IEのみ（allowtransparency属性はIE5.5以上）に対応。
allowtransparency=”true” をiframeタグに指定する。なお、bodyにCSSのbackground-color: transparent;も指定しないといけない。
<body style="background-color: transparent;">
<iframe src="" allowtransparency="true"> ～ </iframe>
IEで背景画像とコンテンツが1pxずれるのを回避する
てんぱってるとき、これ忘れることがあるのでメモ。WinのIEでCSSを指定して背景画像を中央揃えにした際に、1pxずれてしまう。
しかも、ウインドウ幅が奇数の場合にのみずれるみたいです。対象法としては、背景画像を中央寄せにしている要素にpadding-left:1px;を指定する。
詳細は、アットウィズさんのWinのIEでCSSを用いて背景画像をセンターよせで指定した際、1pxずれてしまうを参考に
IE6でpngを使う(JavaScript)
IE6でpngを使うときにお世話になっているJavaScript Library
背景+imgにpngを使う場合は、DD_belatedPNG
かなり使いやすいです。詳細は、IE6で透過PNGを手軽に使えるJavascriptライブラリ「DD_belatedPNG」 | CSS-EBLOGとかITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
■JS(たったこれだけ、idとclassを個々で変更は必要)
<!--[if lte IE 6]>
<script type="text/javascript" src="common/js/ie6bgpng.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix( '#document,img'); //個々で変更する
</script>
<![endif]-->
imgにpngを使う場合は、アッキーのie6png.htc
※透過pngが必要
Similar Posts:
- テキストが画像の下に回り込むのを防ぐために、よく使うoverflowプロパティを使ったレイアウト
- 美しいjQueryプラグインのメモ
- 使っているFirefoxの拡張機能（アドオン）【Firefox Add-ons】
- 使っているソフトやツール
- 日本語の解説がうれしいjQueryプラグイン（国産）