忍者ブログ
18 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

23 December

box-shadowを内側につける

http://www.webchips.org/box-shadow%E3%81%A7%E5%86%85%E5%81%B4%E3%81%ABborder%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E6%96%B9%E6%B3%95

上線はbox-shadow:inset 0 1px 0 0 #333;

下線はbox-shadow:inset 0 -1px 0 0 #333;

左線はbox-shadow:inset 1px 0 0 #333;

右線はbox-shadow:inset -1px 0 0 #333;

PR
24 April

スマホでサイトをみたときに、テキストの右側に余白ができる現象

トラブル

テキストの右側のみ余白があく。指定していない幅で折り返されている。
動画や画像などは正常な幅で表示される

原因

Androidブラウザの「ページの自動調整」が原因

解決策

１、ブラウザのメニューアイコン → 設定 → 高度な設定 → ページの自動調整のチェックを外す

　見てる人にゆだねる解決法では作ってる側としては文句を言われるだろう･･･

２、該当テキスト箇所にbackground-colorを指定する
　
　背景が無地であればいけますね（＊transrarent　では無効になる）

３、該当テキスト箇所にbackground-imageを指定する

　background-image:url(xxxx.gif);　存在しないダミー画像を表記するだけでいいらしい
　透過.gifなど作るとよい

＊display:tableを指定してると何をやってもだめらしい

http://gootre.blog.so-net.ne.jp/android-browser-text-cr
http://jumble-note.blogspot.jp/2012/10/androidcss.html
http://webutubutu.com/webdesign/1555
通常のPCブラウザだけじゃなくて、スマホのブラウザも気にしなくちゃいけないとか
本当にめんどくせえ･･･
しかも原因が特有の勝手な設定とか･･･
        
  • 1
  • 2
  • 3