ホームページのコーディング
訳のわからない事が多すぎる・・・
こんな事が起きてます。
レスポンシブで制作、デベロッパーツール
+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;}
+++++++