2011年2月24日木曜日

IEが width / heightを無視してボックスを拡大してしまうバグの回避方法

要素のはみ出しの処理の不具合(IE/overflow):スタイルシート(CSS)辞典 - HTMLタグボード
しかし、IEでは要素やボックスに「widthとheightプロパティ」を設定していて、かつ「overflow」プロパティが指定されていない、または「overflow:visible;」を指定している場合でも、文字が要素に収まりきらないとき、本来なら文字がはみ出て表示されるはずのボックスが勝手に拡大してしまうという不具合があります。

枠線の中に表示して、はみ出す場合はそれが分かるようにしたいのに、IEがボックスを勝手に大きくしてしまうのではみ出すはずがはみ出さない問題が発生。

今回はボックスで囲うのを諦めて、下記のような枠線を表示にすることにより回避した。
div#waku {
    width: 100px;
    height: 100px;
    z-index: -1;
    position: absolute;
    top: 10px;
    left: 10px;
    border: solid 1px black;
    background-color: white;
}

z-indexを付けてるのは枠内の背景を白にしたら他の要素が見えないように塗りつぶされたので、他の要素の後ろにするため。

0 件のコメント:

ブログ アーカイブ

カテゴリー