2 つの画像を子に持ついくつかの li 要素をフロートで 2 列の横並びにさせる…というコードを仕事で書いてた。詳しくはいえないけど色々ときびしい制約がある環境下なので「flexbox 使えや」とかいってはいけない。
実際のコードと細かい数値は違うけど、おおまかにいうと以下のような状況である。
- 画像の幅はどちらも 300px。
- 代替テキスト的に分かち書きすべき内容だったので、何も考えずに
br要素で改行を入れた。つまり画像は縦に並ぶ。 li要素間のギャップが 10px だったので、要素の周囲すべてに 5px のマージンを設定して対応。- 幅はわざわざ指定しなくても非置換浮動要素の幅計算ルールによって 300px になるはずなので、
li要素自体にはwidthを指定していない。
で、この場合 li 周囲のマージンも合わせて、親の ul 要素の幅は (300 + 5 × 2) × 2 で 620px あれば大丈夫だよな…と思って、そうなるようなスタイルを書いてアップしたら、同僚の指摘で Firefox だけレイアウトが崩れていることに気がついてあわてた。
開発者ツールで確認したところ、どうも Firefox では br 要素がわずかながら（フォントサイズのおよそ 1/960 ほど）幅を持つようで、結果この場合だと li 要素の幅が 300.017px とかになってこうなる模様。でも、同じ Firefox でも古いバージョンは問題なく1、しかもこちらは br 要素が同程度の幅を持ってるにもかかわらず大丈夫だったりして、なんかよく分からない。
バグなのかもしれないが、まあ仕様的には「改行を表す」としか規定されてないので、デフォルトで幅を持ってたとしても文句はいえない。回避方法はいくつでも思いつくので、当面は気をつけることにする。
とりあえずは ul 要素の幅を 1px 増やして2対処しておいた。