Chrome 43で擬似要素に指定したdisplay: table-cell
がうまく反映されないことがあった。当初はうまく再現できなかったが、どうもメディア・クエリーを使ってdisplay
プロパティーを切り替えており、かつブラウザーをリサイズするなどして能動的に切り替わった時にのみ起こるようだ。
Demo: Pseudo Display on Resize
デモではul
要素に対して::before
擬似要素を使って「lorem」という単語を、それ以下の単語はli
要素に直接記述している。それらをすべてdisplay: block
にし、メディア・クエリーを使って幅640px以下の場合にdisplay: table-cell
になるようにしてある。ブラウザーのウィンドウ幅を640px以下に変えた場合、横並びに切り替わるはずだが、Chrome 43でのみ擬似要素に指定した「lorem」という単語のみが意図通りに横並びへ変わらない。
ただしChrome 43でも幅640px以下の状態で再読み込みした場合は意図通りに横並びになる。そのため実害はほとんどない。強いて言うのならデバイスの向きが変わった時に切り替わるようなメディア・クエリーを書いているとハマるが、ほぼその場合のみだろう。
簡単なCSSプロパティーの追加などで可能な回避方法は見つけることはできなかった。display
プロパティーを使う代わりに、white-space: pre
と改行コードLFを組み合わせたりするなど、根本的にアプローチを変える必要がある。