つらい・・・

検索窓とcssハックについて

締切済

質問者：匿さま
質問日時：2022/04/22 12:21
回答数：3件

現在自分のWEBサイトに検索窓を設置しております
そしてその検索窓なんですが、iPhoneから見た画面とAndroidから見た画面で大きさが違うのです
入力ボックスも送信ボタンも高さをPXで指定しているのですが、なぜか入力ボックスと送信ボタンの高さが同じ数字を入力しても左右合わないのです
仕方ないので別々のpx数字を入力して合わせたのですがiPhoneからだと大丈夫なんですがAndroidから見るとまたズレています
解決方法を自分で調べたところ、cssハックが有効とのことで色々調べました
そしたら　CSS Browser Selector　というものを見つけましたのでさっそくダウンロードしようとしたのですがダウンロードボタンがどこにもありません
仕方ないのでcssハック以外の方法でボタンのサイズを合わせようと試みたのですがいい方法が見つからず途方に暮れている状態です
どなたか解決方法を教えていただけませんか
よろしくお願い申し上げます

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： naokita
回答日時：2022/04/24 00:37

その前に、iPhoneとAndroidで、両方の主要ブラウザの全てでチェックした方が良いですよ！

何故なら、
ユーザーエージェントや、OS別のハックを利用すると、各ブラウザ別では、また意図しないレンダリングになってしまい、今回のようにイタチごっこのようになったり、ハックの重複になってしまうからね（笑）

話はそこからであって、
連帯責任にするのはNGなように、
最小限の問題点だけをあぶり出せば、１つのハックだけでOKになるんですよ。

- 0
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2022/04/22 18:54

こんにちは

ご説明の文章をイマイチ理解できないでいます。

＞なぜか入力ボックスと送信ボタンの高さが同じ数字を入力しても
＞左右合わないのです
通常、幅（＝左右）を合わせるのなら、高さではなく「幅」を指定すると思いますが？

＞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に記されています）

※ ご質問の文章からは実態がよくわかりませんけれど、勝手に想像するところ、ここまで大仰にしなくても、回答前半のハックでも十分そうな気がしますけれど・・

- 0
- 件

通報する

No.1

回答者： sukitaro
回答日時：2022/04/22 13:43

実機で試したわけではありませんが、

高さに関係しそうなものを全部指定してみるのはいかがでしょうか。

<!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>