SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

IE8で white-space: nowrap がおかしい(不具合?条件不明)

table要素の中に white-space: nowrap を指定した要素があるとき、範囲外の部分まで white-space: nowrap になることがあるらしい。
実際に遭遇したが、普通にスタイルシートを書いているのにおかしくなるので、対処に困る。

HTML例

スタイルシートに span {white-space: nowrap;} と指定して、td要素の中にspan要素を入れてみる。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>テストHTML</title>
<style type="text/css">
body {font-size:80%;}
div {width:200px; background-color:#eeeeee;}
span {white-space: nowrap;}
label {white-space: nowrap;}
th, td {border:1px solid #999999;}
</style>
</head>
<body>
<div>
<p>table要素の親要素に幅と背景色を指定して、はみ出る様子を見やすくしています。</p>
<table>
<tr>
<th>th要素</th>
<td>
<span>IE8改行バグの例</span>
<span>IE8改行バグの例</span>
<span>IE8改行バグの例</span>
<span>span{white-space: nowrap;} を指定。</span>
<span>こういうときは大丈夫らしい。</span>
</td>
</tr>
<tr>
<th>th要素</th>
<td>
<label><input type="checkbox" /> 選択肢テキスト</label>
<label><input type="checkbox" /> 選択肢テキスト</label>
<label><input type="checkbox" /> 選択肢テキスト</label>
<label><input type="checkbox" /> 選択肢テキスト</label>
</td>
</tr>
</table>
</div>
</body>
</html>

表示例

table-white-space-nowrap 表示崩れの例

table-white-space-nowrap 表示崩れの例

条件が不明。この例なら、
• white-space: nowrapにする要素が、table要素の中にある
• white-space: nowrapにする要素が複数並んでいる
• white-space: nowrapにする要素内の先頭には、input要素がある

チェックボックスと項目名という並びなどよくあるのに、この不具合は困る。試してみた範囲では、DOCTYPEがHTML4なら問題なく、XHTML、HTML5だと問題がある様子。

どう対策したらよいのか?

label {white-space: nowrap; display:block; float:left;} など書けば、一応期待される表示に近くなる。テーブルのセルの中なら、floatしても見た感じは問題ないように見える。しかし、すっきりしない。

よい解決法を求む。

関連するメモ

コメント(5)

mm 2010年1月14日 15:40

よい解決法を提示できす申し訳ありませんが、同じ現象の回避策として記事を参考にさせて頂きました。ありがとうございます。

yoshimura 2010年1月14日 19:53

お役に立てて何よりです。足跡ありがとうございます。

aki 2010年7月7日 11:44

white-spaceってそもそもブロックレベル要素に掛けること前提ではなかったですっけ?インラインだから問題がおこるとか?

yoshimura 2010年7月7日 12:06

white-spaceの対象要素は、CSS1ではブロック要素のみ、CSS2からはあらゆる要素みたいですね。
いずれにしても、限られた条件のときに、指定した要素の外に影響がでているかのような表示になるのでかなり困りました。

Tweets that mention IE8で white-space: nowrap がおかしい(不具合?条件不明) at softelメモ -- Topsy.com 2010年7月30日 14:56

[…] This post was mentioned on Twitter by まつバラ, まつバラ. まつバラ said: IE8でwhite-space:nowrapが暴走する件。ヽ(`Д´#)ノ ムキー!! https://www.softel.co.jp/blogs/tech/archives/1101 […]