Webブラウザ別CSSハック&フィルタTips
連載インデックスへ
Webブラウザ別CSSハック&フィルタTips(1)

IE 6で泣かないための、9つのCSSハック

有限会社タグパンダ
喜安 亮介
2009/10/8

【3】min-heightを対応させる方法

 「min-height」をIE 6で実装する場合も「インポータントハック」を使用します。

 まず、先にモダンブラウザへの記述を書き、その下に「min-height」と同じ値を「height」に記述します。IE 6はボックスが中身に応じて拡張するため、100px以下のときは100px。それ以上のときは、その中身のサイズになります。よって、「min-height」と同じ挙動になるということです。

■ 構文

p {
    min-height:100px;
    height:auto !important;
    height:100px;
}

コーディングサンプル(←クリックすると、実際にサンプルがWebブラウザで見られます)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>min-heightを対応させる方法</title>

<style type="text/css">

p {
min-height:100px;
height:auto !important;
height:100px;
background:#f00;
}

</style>
</head>
<body>
<p>内容が100px以下のとき</p>
<p>内容が100pxを超えるとき<br />
min-height<br />
min-height<br />
min-height<br />
min-height<br />
min-height<br />
min-height<br />
min-height<br />
min-height<br />
min-height<br /></p>
</body>
</html>

【4】heightを100%にする方法

 親要素に対しての100%なので、ページ分の高さにするなら、<html>タグや<body>タグに対して「height:100%;」を指定する必要があります。

■ 構文

html, body{height:100%;}
 
p {
    height:100%;
}

コーディングサンプル(←クリックすると、実際にサンプルがWebブラウザで見られます)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>heightを100%にする方法</title>

<style type="text/css">

html, body{height:100%;}
p {
height:100%;
}

</style>
</head>
<body>
<p>height100%</p>
</body>
</html>

【5】フロート時の2倍マージンを通常に戻す方法

 IE 6では下記のように、フロートleftを指定しているものにmargin-leftを指定すると、その値が2倍になります。逆に、float:right;のものにmargin-rightを指定しても同じです。

図1 IE 6だと、マージンが2倍になる
図1 IE 6だと、マージンが2倍になる

 下記のように、対策方法は3つあります。

  1. 「display:inline;」を追記
  2. 「margin」の代わりに「padding」を使用
  3. 「* html」ハックを使い、IE 6だけ「margin」の値を半分に

 ハックを使わずmarginをpaddingに変更する必要もないので、「display:inline」を使用するのがよいと思われます。モダンブラウザでは、floatしている要素のdisplayの指定を無視するので、問題ありません。

■ 構文

p{  
    float:left;
    width:80px;
    margin-left:20px;
    display:inline;
}
p{  
    float:left;
    width:80px;
    padding-left:20px;  
}
p{  
    float:left;
    width:80px;
    margin-left:20px;  
}
 
* html p{margin-left:10px;}

コーディングサンプル(←クリックすると、実際にサンプルがWebブラウザで見られます)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>フロート時の2倍マージンを通常に戻す方法</title>

<style type="text/css">

p{
float:left;
width:80px;
margin-left:20px;
display:inline;
}

</style>
</head>
<body>
<p>margin</p>
</body>
</html>

【6】リストの縦並びメニュー

 <a>タグに「display:block;」を指定すると、IE 6は各リストの下にスペースができてしまいます。

 下記を追記することで修正できます。

  • <li>タグに「line-height:0;」を指定
  • <a>タグに「line-height:normal;」を指定
図2 IE 6だとリストの縦並びメニューの間にスペースができる
図2 IE 6だとリストの縦並びメニューの間にスペースができる

■ 構文

ul {
    margin:0;
    padding:0;
    list-style:none;
}
 
li {line-height:0;}
 
li a {
    display:block; 
    padding:10px; 
    background:#ddd;
    line-height:normal;
}

コーディングサンプル(←クリックすると、実際にサンプルがWebブラウザで見られます)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リストの縦並びメニュー</title>

<style type="text/css">

ul {
margin:0;
padding:0;
list-style:none;
}

li {line-height:0;}

li a {
display:block;
padding:10px;
background:#ddd;
line-height:normal;
}

</style>
</head>
<body>
<ul>
<li><a href="#">list01</a></li>
<li><a href="#">list02</a></li>
<li><a href="#">list03</a></li>
</ul>
</body>
</html>

2/3

 INDEX
Webブラウザ別CSSハック&フィルタTips(1) 
IE 6で泣かないための、9つのCSSハック
  Page1
最も多く使われているのに……、いや、だからこそ
【1】透過PNGを表示させる方法
【2】min-width、max-widthを使いたい
Page2
【3】min-heightを対応させる方法
【4】heightを100%にする方法
【5】フロート時の2倍マージンを通常に戻す方法
【6】リストの縦並びメニュー
  Page3
【7】リサイズ時にずれる
【8】フロート時にテキストが3pxずれてしまっていた場合
【9】外側の要素にoverflow:auto;を指定していた場合
IE 6以外で使えるCSSハックも

[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間