ホームページのコーディング

訳のわからない事が多すぎる・・・

こんな事が起きてます。

 

レスポンシブで制作、デベロッパーツール

+macOS:10.13.6

・safari:13.1.2

・chrome:88.0.4324.182

・firefox:85.0.2

・iphone8plus実機

cssブレークポイント@media screen and ( max-width: 414px) { でのチェック

mailaddressとmailbuttonのdisplay:inline-block設定部分の表示

・safari:レスポンシブモード

 

・chrome:レスポンシブモード

・firefox:レスポンシブモード

・iphone8plus実機

SyberduckとCotEditorでサーバー内cssファイルを直に調整

 

 

 

・・・・

さらに一つ問題発生!

iphoneXRで見てみると、margin:0.1em 0 0 -0.4emしないと

safariのmargin:0 0 0 -0.1emの様にずれる

・・・・

さらにさらに問題発生!

サイトで直接cssコードを修正した際、

下層の

ブレークポイント@media screen and ( max-width: 375px) {の

設定を読み込む????

これを解決するには

max-width: 414px以下にはinput.mailbuttonの項目を全て外した。

 

ちなみに、

Mac,safariのレスポンシブでは起こらない、というより

cssが反応しない?(Mac,chromeは反応あり)

webのcss検証サイトでチェックしても特に間違いはないので

そのままにしてます。

 

最後の悩み、

iphoneXRのズレをどうするか、web検索しても

この問題は出てない・・・

誰か教えてください・・・・

 

この現象これをどう捉えればよいのか、

スキルの乏しい私には謎だらけなのです。

 

++css+++
.mailform{display:block;width:100%;margin-left:0;}
input.mailaddress{display:inline-block;max-width:18em;width:100%;height:17.5px;margin:1px 0 5px 5px;
padding:1px 2px 2px 3px;font-size:1.3em;  letter-spacing:0.01em; vertical-align:0;}
/*==================*/
span.mailtext{font-size:1.1em;margin:0;color:#000;font-family:'gothic',sans-serif;  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/*=========*/
.mailform input.mailbutton{display:inline-block;width:4.1em;height:2.05em;margin:0 0 0 -0.1em;vertical-align:top; padding:0;}

+++++++