androidでバグなのか仕様なのかわからない現象に遭遇。
以下のhtmlソースでandroidだけ表示が崩れる。
<!DOCTYPE html> <html lange="ja"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta charset="utf-8" /> <style type="text/css"> #page{ width:640px; margin:0 auto; background-color:#f7f5ef; } #main{ width:500px; padding:35px 20px 40px 20px; color:#221815; font-weight:bold; } .main_txt{ font-size:24px; line-height:35px; background-color:#f7f5ef;/*ここが変！*/ } </style> </head> <body> <div id="page"> <div id="main"> <p class="main_txt">てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと</p> <p class="main_txt">ああああああああああああああああああああ</p> </div> </div> </body> </html>
android以外は問題ないんだけど。
androidで見るとp要素のところがおかしい。
なにが起きるかと言うと、
p要素のwidthを無視して勝手に横幅が設定されて幅が短くなる。
androidのバージョンによって変わるみたいで、
android2系だと問題ないけどandroid4系だとおかしい(端末の違いも考えられるけど)。
いろいろやってみて、
なぜかbackground-colorを入れると意図した幅で表示された。
なんでbackground-colorで横幅？
ぐぐったけど似たようなこと書いてる人がいないので、
あんまり知られてないのかなと思った。
他にもいろいろあるようで困る。
スマｰﾄフォン(iPhone, Android)ブラウザのバグまとめ
てかandroidはバージョンによってhtml、css、jsの扱いにムラがありまくり！
IE以上にやっかいだわー。
