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メールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

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

本日 月間
＠IT