iOSのブラウザで右側に謎の余白ができる件【困った・解決】

全く困ったもんだ。恐らくiOSのバグなんだろう。

こちらのサイトでも同じような内容が紹介されており、どうやらfont-sizeの指定によるものではないかという指摘。

こういう時は、お決まりの手順として、怪しいものを消していっては確認するしかない。全てのフォントサイズをpx、em、%などいろいろやったり、2カラムのフロートを逆にしたり、letter-spacingを入れてみたり、、。

色々やっていて、グローバルナビゲーションを削除したら治りました。
idにnavという名前でWordPressのカスタムメニューをグローバルナビにしてたのですが、これを削除したら治った。

ここにどんなCSSを書いていたかというと、
margin:10px 0 20px 240px;
こういうものです。

このレフトマージン 240pxがどうやらそのまま右側の余白に240pxをもたらしていたようです。
margin:10px 0 20px;
このように横のマージンを0にしたら正常に表示された。

でも左にどうしても余白が必要だったので、padding-leftプロパティでやることにしました。最後にOKになったCSSはこれ。
div#nav {
font-size: 0.9em;
height: 25px;
margin:10px 0 20px;
padding-left:260px;
}

ちなみにここにwidth:100%とか入れてみたら、やはりダメでした。
もう一個追記で、このdiv id=”nav”はdiv id=”header”が内包していたので、header側にclass=”clearfix”でclearfixを追加したのですが、やはりダメでした。。

下手な説明ですみませんが、参考になればと思います。