コーディング中は基本的にchromeでしか表示確認していません。
「コーディング終わった！別ブラウザでもチェックだ！」と見てみると、まさかの表示崩れが・・・
みたいなことありますよね。
主にIEについて書いてますが、他のブラウザでもchromeと違うことはあるのでそのメモです。
flexでなにかと空白やら崩れができる
flexは便利ですが、たまにハマると原因がわからず時間を溶かします・・・
余白ができる
謎に大きな余白がIEでのみばーんと出来てしまい、初めて見たときは本当にどうしようかと思いました。
flex-directionを指定した時に IE11で表示がおかしくなる
私の場合は、column指定している時に余白が発生していました。
対処法はflexの子要素にmin-height: 0%;とつけること。
画像縦横比率が崩れる
Flexbox使用時にIE11、Edgeだと子要素の画像が伸縮してしまうバグの修正方法
他のブラウザだと画像の縦横比率はちゃんとなっているのに、縦に引き伸ばされたようになってしまう。
imgタグそのものにlex-shrink: 0;で修正。
safariでも
こちらは別記事に書きました。
autoprefixerは大事
私はVSCodeの拡張機能でprefixerを自動的に付与しています。
なのであんまりprefixerについて知識がないのですが、
の投稿を拝見して、やっぱり多少prefixerのことを知っとかないとな〜と思った次第です。
アルファベット縦書きは無理
cssで簡単にできる縦書きですが、IEだとアルファベットが横に寝てしまうんです・・・
text-orientation: upright;すれば他のブラウザでは大丈夫なんですが、IEは非対応;;
この記事を書くためにもう一度調べてたら、こんな記事が
今度縦書きするときにやってみよ。
edgeで電話番号にリンクがつく
Microsoft のedgeで作ったサイトを確認すると、電話番号にリンクが。
これはhead内への記述で消すことができます。
Microsoft Edgeで、数字のみの文字列に勝手にtelリンクがはられる問題
モバイル時のスライドメニューが見切れる対策
これはブラウザの差異というわけではありませんが、あとになって気が付いたので一応。
スマホを横向きで使うとブラウザの縦幅が狭くなって、スライドインのメニューを表示させたときにメニューの数によっては見切れてしまうかもしれません。
なので、サイドからにゅるっと出てくるメニューにスクロールさせてあげるため、スライドインメニューそのもののモバイル時に以下を追記。
overflow-y:scroll; height: 100vh; transform:translateZ(0);
overflow-y: scroll; が効かないディスプレイがある。それはretinaディスプレイ。
scrollが効かないときはheightを見直そう
textarea、IE時に出てくるスライドバーを消す
お問い合わせフォームのテキストエリアIE表示で余計なバーが出てきます。
overflow: auto;
と記述するだけで消えます。
svgファイルの取り扱い
svgの取り扱いになれておらず、初めてのときはえらく大変な思いをしました。
基本的にはネットで書かれている方法でIEでもちゃんと表示できるんですが、どうしても少し縮む画像があり・・・
以下のcodepen、私のためのメモになってしまってわかりにくいのですがすいません。
See the Pen
svgファイルがieでのみ縮む対処法 by hiro (@hiro555)
on CodePen.
imgタグを使ってsvg画像を呼び出している前提で、それで幅がIEでのみうまくいかないとき。
imgタグを収納しているpタグに
position: relative; height: 9px;
高さは任意です。
とにかくimgタグが入る箱の体裁を整えてあげて、そのうえでimgタグに
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
としてあげるとpタグにはりつくようにぴったり納まりました・・・！
calc( 100% / 3 )はieでカラム落ちする
flexで子要素を３等分して並べたい時、普通にcalc( 100% /3 )を指定してたんですが
割り切れない余りをieでは繰り上げてしまうため、他のブラウザでは発生しないカラム落ちが起きてしまいます。ぎゃーー
対処法は33.333%と書くなり、割り切れるようにするなりしかないようです。
ieでフォントの位置が上にずれる
こちらをご参考ください。文字ブロックに優しい処理
以下以前の内容です—————————————-
特定のフォントで起こるようなのですが、
aタグでボタンを作った時、ieで見てみるとフォントが少しだけ上にずれて表示されていました。
これを修正するには
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .el-btn { font-family:serif, "メイリオ", Meiryo, sans-serif; } /* IE11 */
}@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .クラス名 { プロパティ : 値 ; } /* IE11 */
}ie１１だけフォントを変えてあげると治るようです。
フォントを変更することが望ましくないのであれば、高さやpaddingなどで微調整するのも良さそう。
ただこのハックはあまり良いものではない？というご意見もあるようなので、
ご利用は計画的に。
以前の内容ここまで————————————————
iosで input type=”submit”が角丸になる
PCのsafariでチェックして、よしちゃんとできてるな〜と思ったら
iPhoneで見た時・・・なんじゃこりゃ〜な丸いボタンになってました。
コンタクトフォーム7ではsubmitボタンがinputで生成されるようで、それがiosのデフォルトスタイルになってしまった模様。
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
上記でクリアにできました。
誰かが書いたcssに追記する仕事だと、自分で使ってるリセットcssが使えないのでその辺がちょっと不便です。
まとめ
コーディングやプログラミングを自習してただけのときはブラウザごとの違いなんて、全然気にしてませんでした。
でも実務だと、そうはいかない・・・！
慣れかもしれませんが、別ブラウザチェックはけっこう神経すり減ってます。
