span要素に設定した枠線が右側だけ消える現象。原因はbrだった

イントロダクション

HTML を自動的に生成して表示する JavaScript コードを作成した時に気が付いた現象です。

span要素に設定した枠線がなぜか右側だけ消えていました。

右側の枠線が消えた span 要素

理由を調べるために、以下の HTML を作成し、各ブラウザ(Chrome, Internet Explorer, Firefox）で表示してみました。

実験に使用した HTML

以下のように、スタイルとして枠線を設定した <span>タグを 4 つ並べました。

<span style="border-style:solid;border-width:3px;border-color:#333333;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br /></span>
<br />
<span style="border-style:solid;border-width:3px;border-color:#333333;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span><br />
<br />
<span style="border-style:solid;border-width:3px;border-color:#333333;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br /></span>
<br />
<span style="border-style:solid;border-width:3px;border-color:#333333;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br /></span>

1 番目は、spanタグの終了直前に改行と<br />が入っているパターンです。
2 番目は、spanタグを閉じた後に<br />が入っているパターンです。
3 番目は、spanタグの終了直前に<br />が入っているパターンです。
4 番目は、spanタグの終了直前に改行と<br />が入っているパターンです。(1 番目と同じ）

Chrome

バージョン：35.0.1916.114 m

以下のように、１番目と３番目のspan要素の右側の枠線が消えました。

Chrome で表示した場合

Internet Explorer

バージョン：9.0.8112.16421

以下のように、１番目と３番目と4番目のspan要素の右側の枠線が消えました。

Internet Explorer で表示した場合

Firefox

バージョン：29.0.1

Firefox の場合は、右側の枠線が消えるという現象は起こりませんでした。

Firefox で表示した場合

まとめ

以上の各ブラウザ(Chrome, Internet Explorer, Firefox）で表示した結果を見ると、ブラウザによって挙動が異なるという結果が得られました。

Chrome と Internet Explorer では、枠線が消えたのに対して、Firefox では枠線が消える現象は発生しませんでした。

また、今回の現象が発現するには、span 要素内に br 要素が最後に入っていると発生する可能性があるということがわかりました。


span 要素内に br を入れてはいけないのでしょうか？

参考文献1によると、span 要素はインライン要素であり、中に記載できるタグはインライン要素だけです。br はインライン要素なので、文字通りに説明を解釈すると br を span の中に入れてもよいはずです。


試しに、span 要素の途中に br 要素を挿入したときの挙動を調べてみました。
使用した HTML は次のようになります。

使用した HTML

<span style="border-style:solid;border-width:3px;border-color:#333333;">aaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaa</span>

結果

span要素の途中にbr要素を挿入した場合
左：Internet Explorer
右：Chrome

結果は、span 要素中の br 要素による改行は行われ、かつボーダーも span 要素を囲むように表示されました。


以上のことから、span 要素の終了直前に br 要素を入れて改行すると、span 要素に設定したボーダーの右側が消える場合があるということがわかりました。


ここまで書いてふと思ったのですが、span 要素の終了直前に br 要素が入っているわけですから、Firefox のように右側の枠線が同じ行に表示されるのもおかしいように思いました。

span 要素の終了直前に br 要素が入っているということは、右側の枠線は同じ行ではなく、次の行の先頭に表示されるのが、素直な表現ではないでしょうか。

span 要素の終了直前に br 要素 を素直に表現（イメージ）

とはいえ、そのように表示されても、そのような使い方はおそらくしないでしょう。

そもそも、span 要素の終了直前に br 要素が入っているという使い方もしないような気がします。


今回のことから言えることは、span要素に設定した枠線が右側だけ消える現象が発生したら、br が入っていないかどうかを疑った方がよいということです。