背景色のスタイルを設定すると改行が消える

javascriptで文字列に背景色を設定する処理があるのですが、
なぜか改行が消えてしまいます。

ためしにhtmlで書いてみたところ、背景色のあり、なしで表示の仕方が違うようです。

<table border="1">
<tbody>
<tr>
<td class="head" valign="top">
<span>
背景色なし
</span>
</td>
<td valign="top">
<span contentEditable="true">
<ins>あああ<br>あああ<br>あああ<br></ins>
</span>
</td>
</tr>
<tr>
<td class="head" valign="top">
<span>
背景色あり<br>（スタイル）
</span>
</td>
<td valign="top">
<span contentEditable="true">
<ins style="background-color:#ff99ff;">あああ<br>あああ<br>あああ<br></ins>
</span>
</td>
</tr>
</tbody>
</table>

背景色を変えただけなのに、見え方が変わってしまうのは、おかしいと思うのですが、
これはＩＥのバグでしょうか。
なにか解決策ありますでしょうか。

よろしくお願いします。

No.2 ベストアンサー 回答者： notnot 回答日時： 2010/12/17 22:55

Firefoxだと必ず末尾改行無しになるので、おそらく末尾改行無しで表示されるのが正しそうです。

原因はよくわかりませんが（おそらくIEのバグ）、回避策としては、背景色を指定しないほうにも、
background-color: transparent;
を指定すると、末尾改行無しでそろいます。

改行されるほうでそろえるなら、style指定をinsでなくその外のspanかtdに付けると改行されます。ただし、Firefoxでの表示と異なってきます。

この回答へのお礼

background-color: transparent;
ありがとうございます。こんな設定もあったのですね。

改行無にそろえたいと思います。

お礼日時：2010/12/21 11:58

No.1 回答者： naokita 回答日時： 2010/12/17 20:59

<ins>あああ<br>あああ<br>あああ<br></ins>

ではなく、
<ins>あああ<br>あああ<br>あああ</ins>

この回答へのお礼

ご回答ありがとうございます。
そうですね。そもそも最後に改行があるのがおかしいのですね。

お礼日時：2010/12/21 11:57