- 締切済み
スマホコーディングAndroid2系 バグについて
スマホコーディングAndroid2系 バグについ 表題の件で大変困っています。 どなたか、解決策をご存じのかた教えて頂けると幸いです。 以下、バグの内容 スマホサイトAndroid2系 問合わせ系フォームの入力エリア（タップエリア）で 入力しようとすると、inputエリアの選択はされるが 上下にスクロールされるというバグが発生。 テキスト入力するたびに上下にスクロールが起きる その他、android4系 iOSでは正常に動作 原因は、normalize.cssに記載の body { margin:0; }（詳しくはbody { margin-left:0; }）である事は突き止めました。 ただbody { margin:0; }をとると余白が出てしまいみっともないです。 （余白が出ている状態では正常に動作します） 荒業で、bodyのmarginをとり #header #maincontensu #footer にmargin-left:-15;などと入力しても状況は変わりません。 だれか解決策、アイディアをご存じの方がいれば教えて頂ける幸いです 以上、宜しくお願い致します。
- japon-kin
- お礼率55% (20/36)
- その他（スマートフォン・携帯・タブレット）
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- unokwave
- ベストアンサー率58% (966/1654)
関連するQ&A
- ホームページビルダーでバグ?
ホームページビルダー9を使って直接タグを打ちながらサイトを作っているのですが、スタイルシートマネージャーが正常に認識する時と認識しない時があります。 例えば table{width:800px; margin-left:auto; margin-right:auto;} は認識するのに .menu{width:700px; background-color:#ffffff; margin-left:auto; margin-right:auto;} は認識しません。 たぶん記述の仕方は間違っていないと思うんですが、これはバグなのでしょうか？ ビルダーを一度停止して、再起動させても直りません。どうかご教授よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- なぜ？Androidで表示されないのでしょうか?
あるサイトにあるエッセイ（ページの左半分程度)を私のiphone4sでは 完全にスクロールしながら読めるのですが知り合いのAndroidスマホのIS13SHでは スクロール出来ずページ全体が上下ししまい途中までし か見る事が出来ません。どうしてですか？ Androidのブラウザの設定を変えなければならないのですか？ 宜しくアドバイスをお願いします。 このサイトのエッセイです。 http://www.sakuranbo.co.jp/song2011/2012/02/2vol1vo.html
- ベストアンサー
- Android
- ネットスケープで上に余白があいてしまいます
お忙しいところすみません。どうしたら良いのか分からないので、教えていただけると大変うれしいです。 ＩＥだと上の余白がなくちゃんと表示されるのですが、ネスケで見ると上にかなりの余白があいています。マージンを２パターンで指定しているのですが、なぜなのでしょうか？ body { margin-left: 0px; margin-top: 0px; margin-height: 0px; margin-right: 0px; margin-bottom: 0px; } 何かタグが足りないのでしょうか？ どうぞよろしくお願いします。
- ベストアンサー
- HTML
- IEのバグに詳しい方、お願いします。
質問したい事は2点あります。 1：ナビゲーション(画像をクリックすると別ページへリンク)の位置設定が IEだけ上手くいかない（Page1） ※firefox、Google Chromeでは正常の位置になる 2：同じCSS(CSS1)を使っているのに、 Page1のみヘッダーに20pxほどの余白ができる ※上記3つのどのブラウザにも余白ができる Dreamweaver CS6を使って作成しています。 1の質問に関してですが、W3C、書籍などでHTMLのバグについて調べたのですが（理解力不足もあるかもしれません）解決できませんでした。以下に、直したい部分のXHTMLとCSSを載せますので、わかる方いらっしゃったらお願い致します。 2の質問についてですが、PAGE2は余白が出ないので比較として載せます。 ※CSSはCSS1を使用しています。 よろしくお願いします。 --------------<page1 XHTML>-----------------------<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>整骨院</title> <link href="base.css" rel="stylesheet" type="text/css" media="all" /> <link href="top.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="header"> <h1><img src="../k.page1/page1-2.png" alt="整骨院" /></a></h1> </div> <ul id="contens-nav"> <li id="dousagaku"><a href="dousagaku.html">動作学"</a></li> </ul> </body> </html> --------------<page1 css1>----------------------- @charset "UTF-8"; * { padding:0; margin:0; } img { border: 0 none; } body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: left; line-height: 1.5; } #header{ text-align:center; margin-left:auto;margin-right:auto; background-color:#000; } #h1{ margin: 0px; padding: 0px; } --------------<page1 css2>----------------------- @charset "UTF-8"; #contens-nav{ position: absolute; float: left; height: 200px; margin-top: 30px; margin-right: 23px; margin-left: 10px; list-style: none; top: 427px; left: 743px; display:inline; } #contens-nav li a{ display: block; height: 0; padding-top: 214px; overflow: hidden; background-image:url(../k.page1/dousagaku2.fw.png); background-repeat:no-repeat; } #dousagaku{ left:0px; } #dousagaku, #dousagaku a{ width: 214px; } #dousagaku a{ background-position: 0 0px; } #dousagaku.current a, #dousagaku a:hover { background-position: 0 -220px; } --------------<page2 XHTML>----------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>動作学</title> <link href="base.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="header"> <h1><img src="../page2.dousagaku.png" alt="動作学" /></h1> </div> </div> </body> </html>
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSで、height:100%の中央寄せ
白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。 本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、 html, body, containerのそれぞれにheight:100%、 親要素にmargin, padding 0を指定したところ、 画面をスクロールさせたところから緑色の背景色が消えています。 どのようにすれば解決できるのでしょうか？ *{ margin:0; padding:0; } html, body{height:100%;} #container { height:100%; width:800px; background-color:#0A0; margin:0px auto; }
- ベストアンサー
- HTML
- フレームを作ったページ全体にmarginを使いたい。（余白を設けたい）
フレームを使って左右にメニューとコンテンツで、分けたページを作っています。 フレームを使わないページの場合は、body要素を使うのでCSSに body{margin-left:30%} とか書けば、左の部分に余白を設けられると思うのですが、フレームを使うとbodyを使わないと思うのですが、どのようにすれば実現できるのでしょうか？
- ベストアンサー
- HTML
- floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> （<body>前、</body>後省略） ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。
- 締切済み
- HTML
- スクロールバーによって表示がズレます。
下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。（IEはOKなのですが・・・） どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }
- ベストアンサー
- HTML
- Android4.1の文字入力バグについて
未だに困ってる上によくわかってない事なので、正しく把握したいと思い質問させていただきます。 私はINFOBAR A02を買って使いはじめてから実際にバグらしき動作と遭遇して初めてネット上で確認して色々な情報を知ったのですが、こちらの入力フォームでも実際起こってますが、例えば文字入力中に文中の間違った箇所をタップまたはキーの移動ボタンで移動してカーソルを持っていき修正したりしようとした際、急に全く違う場所にカーソルが移動して、さらにもとの場所には意味のわからない文字が残されて移動先にはパソコンのインサートキーを使ったような感じで文字が変な文字に上書きされてしまう現象が起きています。 インターネット上で調べた限り、ソニー及びソニーモバイルの端末・機種以外のAndroid4.1搭載機種は共通で起こっていて 、Googleもその現象は認識している、というところまでは見ています。しかし、それもAndroid4.1搭載端末が登場した最初から起こっている、と書いてあったので、そうなると少なくとももう半年はそのままということになりますが、どうなっているものなのでしょうか。 間違った情報を認識していたら申し訳ございませんが、結局はGoogleがこのバグに対してなかなか修正にたどり着かないのでしょうか、または4.1ではどうしようもなく4.2にするしかないのでしょうか。それか、Google側はなんの問題もなくメーカー次第ということなのでしょうか。あるいは、Googleからは修正後のOSはリリースされていて後はメーカーがアップデートを提供すれば修正されるのでしょうか。 ともかく、私としてはこの現象をそろそろ何とかしてほしいと思ってはいます。 少々話がそれてしまいましたが、正しくはどの様な事や経緯があり今どうなっているのかなど、正しい情報を教えて頂ければ幸いです。 よろしくお願い致します。
- ベストアンサー
- Android
お礼
知識がなくすみません。 プログラミング カテゴリーで質問させてもらいました。 質問を閉じます 大変助かりました。ありがとうございます！！