対象となるブラウザ
InternetExplorer（以下IE）には、要素に入りきらない文字の表示方法を定める『overflow』プロパティにスタイルシートの解釈の不具合があります。
この不具合は、以下のブラウザが対象です。
- InternetExplorer6を含むそれ以前のバージョンすべて
具体的な不具合
CSSの解釈の通りでは、「overflow」プロパティが指定されていない、もしくは「overflow:visible;」を指定している場合、『「widthとheightプロパティ」が指定されている要素やボックスの中身の文字がその要素に収まりきらないとき、その部分は要素からはみ出して表示される』というのが正しい解釈です。
しかし、IEでは要素やボックスに「widthとheightプロパティ」を設定していて、かつ「overflow」プロパティが指定されていない、または「overflow:visible;」を指定している場合でも、文字が要素に収まりきらないとき、本来なら文字がはみ出て表示されるはずのボックスが勝手に拡大してしまうという不具合があります。
CSSサンプル
p{
width:300px;
height:30px;
background-color:#ffdff9;
}
IEではwidthとheightプロパティを設定した要素からはみ出した文字の見え方に不具合がある サンプル
対処方法（その1）
この不具合は、要素やボックスにwidthとheightプロパティを両方指定している場合に発生します。
しかし、heightプロパティを指定せず、widthプロパティだけ固定するようにすれば、要素やボックスの高さについては、内容に応じて変わるものの、要素から文字がはみ出すことはありません。
これが許容できる範囲であれば、このような指定の仕方も考えられます。
対処方法（その2）
もう一つの対処方法として、はみ出した部分の処理を予め定めておく方法です。
『overflow』プロパティは、要素に文字が収まりきらないときの処理を指定できます。
プロパティの値を「overflow:hidden;」もしくは、「overflow:auto;」、「overflow:scroll」に設定しておくと良いでしょう。
意味合いとしては、「overflow:hidden;」は、はみ出た部分は表示しない。
「overflow:auto;」はwebブラウザに依存、「overflow:scroll」はスクロールがでて要素内に全てを表示するという意味です。詳しくはこちら
要素のはみ出した部分の処理の対処例 （いずれか）
セレクタ
{
overflow:hidden;
overflow:scroll;
overflow:auto;
}
