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

質問

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 · ベストアンサー

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

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

お礼

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

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

回答No.1

naokita

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

お礼

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