現在自分のWEBサイトに検索窓を設置しております
そしてその検索窓なんですが、iPhoneから見た画面とAndroidから見た画面で大きさが違うのです
入力ボックスも送信ボタンも高さをPXで指定しているのですが、なぜか入力ボックスと送信ボタンの高さが同じ数字を入力しても左右合わないのです
仕方ないので別々のpx数字を入力して合わせたのですがiPhoneからだと大丈夫なんですがAndroidから見るとまたズレています
解決方法を自分で調べたところ、cssハックが有効とのことで色々調べました
そしたら CSS Browser Selector というものを見つけましたのでさっそくダウンロードしようとしたのですがダウンロードボタンがどこにもありません
仕方ないのでcssハック以外の方法でボタンのサイズを合わせようと試みたのですがいい方法が見つからず途方に暮れている状態です
どなたか解決方法を教えていただけませんか
よろしくお願い申し上げます
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
その前に、iPhoneとAndroidで、両方の主要ブラウザの全てでチェックした方が良いですよ!
何故なら、
ユーザーエージェントや、OS別のハックを利用すると、各ブラウザ別では、また意図しないレンダリングになってしまい、今回のようにイタチごっこのようになったり、ハックの重複になってしまうからね(笑)
話はそこからであって、
連帯責任にするのはNGなように、
最小限の問題点だけをあぶり出せば、1つのハックだけでOKになるんですよ。
No.2
- 回答日時:
こんにちは
ご説明の文章をイマイチ理解できないでいます。
>なぜか入力ボックスと送信ボタンの高さが同じ数字を入力しても
>左右合わないのです
通常、幅(=左右)を合わせるのなら、高さではなく「幅」を指定すると思いますが?
>iPhoneからだと大丈夫なんですがAndroidから見るとまたズレています
何か、別の要素を基準にして、位置を合わせたいということなのでしょうか?
それなら、高さや幅だけでなく、位置を指定しなければ・・・
>cssハックが有効とのことで色々調べました
safariをハックしたいのでしょうか、それともiOSでしょうか?
とりあえず、safari系のハックなら
https://www.seojuku.com/blog/ios-css.html
iOSならこんなかんじ。
https://blanche-toile.com/web/css-hack
>CSS Browser Selector というものを見つけましたのでさっそくダウンロード
>しようとしたのですがダウンロードボタンがどこにもありません
もしかすると、これ(↓)のことでしょうか?
https://rafael.adm.br/css_browser_selector/
もしそうなら、中ほどの「DOWNLOAD」の欄のリンク先を「右クリック」-「名前を付けて保存」などでDL可能です。
左クリックで表示される内容をまるっとコピペしても同じことですね。
(使い方はその下の、USAGEに記されています)
※ ご質問の文章からは実態がよくわかりませんけれど、勝手に想像するところ、ここまで大仰にしなくても、回答前半のハックでも十分そうな気がしますけれど・・
No.1
- 回答日時:
実機で試したわけではありませんが、
高さに関係しそうなものを全部指定してみるのはいかがでしょうか。
<!DOCTYPE html><html lang="ja">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
input[type='text'],
input[type='submit']{
box-sizing: border-box;
font-size:16px;
line-height:1.4;
height:2em;
padding-top: 0;
padding-bottom: 0;
margin-top: 10px;
margin-bottom: 10px;
border: thin solid #555;
outline: none;
}
</style>
</head>
<body>
<form>
<input type="text">
<input type="submit">
</form>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストボックスの番号を使っ...
-
Excel-VBAでInputBox+Pulldown...
-
エクセルVBA テキストボックス...
-
初歩的な事だと思います。 Sub...
-
「イ分」・・・フンという文字...
-
ExcelVBAのユーザーフォームで...
-
VBAでInputBoxの再入力をさせる...
-
c#でTextBoxの入力制限
-
DataGridView 列ごとの入力制限
-
教えて!全角文字「μ」の半角
-
エディットボックスの入力制限...
-
アルファベットGの小文字の入力
-
TEXTAREA に入力時の位置
-
タグを教えて下さい
-
数字以外の入力をエラーにする...
-
ACCESS テキストボックスの入力...
-
EXCEL VBAで、URLを入力して、...
-
UWSCで、スクリプトの実行時間...
-
VBA R1C1形式で変数の入力について
-
accessで該当するレコードがな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エクセルVBA テキストボックス...
-
テキストボックスの番号を使っ...
-
初歩的な事だと思います。 Sub...
-
Excel-VBAでInputBox+Pulldown...
-
数字以外の入力をエラーにする...
-
VBAでInputBoxの再入力をさせる...
-
VBA R1C1形式で変数の入力について
-
EXCEL VBA で指定した範囲に入...
-
c#でTextBoxの入力制限
-
TextBoxから数字が文字...
-
教えて!全角文字「μ」の半角
-
DataGridViewの桁数制限に関して
-
excel vba でユーザーフォーム...
-
ExcelVBAのユーザーフォームで...
-
入力フォームの値をQRコードで...
-
アクセスのマクロ
-
エディットボックスの入力制限...
-
「イ分」・・・フンという文字...
-
DataGridView 列ごとの入力制限
-
複数行の入力を受け取る方法
おすすめ情報