Firefox 55.0.3 において、レンダリングモードが Standard モード時に br 要素に width が存在する件について。

実は昔っからのバグらしい。でも古いバージョンの Firefox(確認できたのは48.0.2)は、親(ブロック)要素の width に加算しないのでカラム落ちとか発生しないのだ。

でも、いつの頃からか、br の width が親要素にも反映されるようになったので、カラム落ちとか発生するようになっちゃったんだぜ。

下は確認用のサンプルです。☆と☆の間に <br> があります。

☆
☆

いろはにほ
へとちりぬるを


現行バージョン
Firefox55のインスペクターで見ると、brにはwidthが存在し、親要素のwidthに加算される。

Firefox55のインスペクター Firefox55のインスペクター Firefox55のインスペクター


古いバージョン
Firefox48のインスペクターで見ると、brにはwidthが存在するのは同じだけど、親要素のwidthに加算されてない!(親要素がインラインの場合には加算されるよ)

Firefox48のインスペクター Firefox48のインスペクター Firefox48のインスペクター


解決方法に br{display: block;} としちゃう方法はあるけど、親要素が inline-block だった場合に余計な一行分の空白が誕生するよ!

もうね、テキスト以外のところに <br> 使うなって結論になるかもしんない。

Mozilla Japan コミュニティさんから、解決に至る道の啓示がありましたよ!mozregressionを利用して、どのへんのバージョンから親要素で勘定するようになったか調べると良いことがあるかもしれないよ!コマンドラインとかむずかしいので、誰かやって!

2017-08-28T19:19:34+09:00 カナかな団首領