レスポンシブ案件の途中でちょっとハマったのでメモ。

ブロック、インラインブロック要素を並べていくケースはよくありますが、
最近はレスポンシブ対応が求められることも増えて、widthやmarginもパーセント指定をデフォルトにしました。
端末の画面サイズもバリエーションが増えてきたのでこっちの方がいいですね。

以下のcssのようにすることが多かったんですが、なぜかiPhone5だけ要素が段落ちしてしまってました。

.square { width:49%; display:inline-block; margin:0 2% 2% 0; }
.square:nth-child(2n) { margin-right:0; }

調べてみるとこんなケースがありました。

iPhone5/iOS8.0 SafariでCSSの不具合

“このWebページで問題が起きたため、再度よみこまれました”
“～URL～で問題が繰り返し起きました。”
と表示されページが読み込めない。
原因っぽかったのは要素を指定するのに

.hoge > div:nth-child(3) > div > div > div:nth-child(3) a

のようにE:nth-child(n)を複数回しようすると上記のようなエラーが起こるっぽい。
そもそも設計の仕方が間違えてると思うんだけど。。。
誰が書いたか分からないCSSにはまった。。。

nth-childが怪しいのかな？

僕のケースでは、nth-childを複数回使ってはいなかったし、上記のような哲学的な要素指定もしていなかったんですが、ここを探ってみようかなと想い、とりあえずnth-childの指定を他の指定に変えてみ続けたところ、

nth-of-typeだと段落ちしない

と、あっさり解決です。

.square { width:49%; display:inline-block; margin:0 2% 2% 0; }
.square:nth-of-type(2n) { margin-right:0; }

けっこう、iPhoneのsafariではバグが多く振り回されることが多い…