今さらだけど、IE6対策中心のCSSメモ

      2017/01/24

もう古いけど、前は役になったのでメモとして残しておきます。

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が必要

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;

スポンサーリンク

 - オウンドメディア構築・運用で使える基礎知識