もう古いけど、前は役になったのでメモとして残しておきます。
IEでよくおこるCSSの問題は、おもにhasLayoutが影響している。
hasLayoutについては。ウノウラボさんのhasLayoutとは何かの説明がわかりやすいので参考に。
すべてをtrueにしてしまうと問題もおこる。
- IEは、ul や ol のリストマークは、hasLayoutがtrueだと消えてしまう。
- IE6 や IE7 で垂直方向の margin が相殺されない。
目次
- hasLayoutをtrueにして、くずれを防ぐ
- peek-a-boo Bug
- 外側のブロック要素に、border-leftとpadding-bottomを定義するとおこるhasLayoutのバグ
- ネガティブマージン
- IE6のみ背景が表示されないときの対処
- padding-top値がIE6とIE7だけ倍になるのを修正
- ie6余白の解消
- floatなしで横並びIEにはdisplay: inline; zoom: 1;をつける
- IE6でpngを使う
- 半角英数字の文字列を折り返す（IE6以外もオッケー）
- インラインフレームの背景を透明にする
- IEで背景画像とコンテンツが1pxずれるのを回避する
- IE6でpngを使う(JavaScript)
- clearfix （NetscapeとMac IEは、対象ブラウザからはずす）
- Min-Height Fast Hack
- The IE Doubled Float-Margin Bug
- a要素をうまく活用する。
- opacityを使ってCSSで半透明にする。
- Web印刷時のレイアウト調整 IE6、7用A4サイズ
- IE7のbody要素の背景画像も拡大させる
- IE6でaltが表示されるのを消す
- ボックスモデルバグ
- 注記などで改行が入っても文字の頭をそろえる
- ボックスの自動拡張
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が必要
clearfix （NetscapeとMac IEは、対象ブラウザからはずす）
clearfixのかわりに、overflow:hidden; + zoom:1;か親要素に、float:left;をつける
でも、firefoxで印刷のときおかしくなるから通常のclearfixのほうがいいかも。
.clearfix {/zoom : 1;}
.clearfix:after {
content : '';
display : block;
clear : both;
height:0;
}
詳細は、ヨモツネットのいまどき ? いまさら ? clear fix のコードを参考に
Min-Height Fast Hack
文字サイズを縮小したとき、liなどに指定している背景画像が切れてしまう場合の対処法
下記サンプルの○○pxに確保したい高さの数値をいれる。
li {
min-height:○○px;
height:auto !important;
height:○○px;
}
The IE Doubled Float-Margin Bug
floatした方向と同じ側に、marginを指定すると、Win IE 6 だけmarginが倍になる。
対処方法は、display: inline;もいっしょにいれれば解決する。
a要素をうまく活用する。
下記のように指定すると、マウスにカーソルをのせたときに画像やテキストを動かすことができる。
a:hover {
position:relative;
top:2px;
left:2px;
}下記のように指定すると、印刷の際にリンク先のURLを表示できる。（IEは、疑似要素に対応していないのでダメ）
a:link:after,
a:visited:after {
content:"(attr(href)")";
}
opacityを使ってCSSで半透明にする。
a:hover imgに指定など、いろいろ使いどころがあるので、メモ
a:hover img {
filter: alpha(opacity=70); /IE対応
-moz-opacity:0.7;
opacity:0.7;
-ms-filter: "alpha(opacity=50)"; /IE8対応
zoom: 1; /* IE（インラインで使うとき）*/
}
Web印刷時のレイアウト調整 IE6、7用A4サイズ
IE6、7用A4サイズ
649(印刷での表示幅) ÷ 950(スクリーンでの表示幅) = 0.68（端数切り捨て）
body {
/zoom: 0.68; IE6,7用
}
IE7のbody要素の背景画像も拡大させる
html要素にbackground-colorとwidth:100%; height:100%;を指定
body要素にもwidth:100%; height:100%;を指定
IE6でaltが表示されるのを消す
imgにtitle=””を追加する
ボックスモデルバグ
IE6は、後方互換モードの場合margin: 0 auto;でセンタリングされない。
ブロックレベル要素の親要素にtext-align: center;を追加する。
+ センタリングさせたブロックレベル要素へ
「text-align: left;」
注記などで改行が入っても文字の頭をそろえる
div {
text-indent:-1em;
padding-left:1em;
}
ボックスの自動拡張
親ブロックに下記を追加
word-break: break-all;
overflow: hidden;
