タグ: WordPress
2013/01/21
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を追加したのですが、やはりダメでした。。
下手な説明ですみませんが、参考になればと思います。