コーディング後、ブラウザごとに違う表示を修正する

css/コーディング

コーディング中は基本的にchromeでしか表示確認していません。

「コーディング終わった!別ブラウザでもチェックだ!」と見てみると、まさかの表示崩れが・・・

みたいなことありますよね。

主にIEについて書いてますが、他のブラウザでもchromeと違うことはあるのでそのメモです。

flexでなにかと空白やら崩れができる

flexは便利ですが、たまにハマると原因がわからず時間を溶かします・・・

余白ができる

謎に大きな余白がIEでのみばーんと出来てしまい、初めて見たときは本当にどうしようかと思いました。

flex-directionを指定した時に IE11で表示がおかしくなる

私の場合は、column指定している時に余白が発生していました。

対処法はflexの子要素にmin-height: 0%;とつけること。

画像縦横比率が崩れる

Flexbox使用時にIE11、Edgeだと子要素の画像が伸縮してしまうバグの修正方法

他のブラウザだと画像の縦横比率はちゃんとなっているのに、縦に引き伸ばされたようになってしまう。

imgタグそのものにlex-shrink: 0;で修正。

safariでも

こちらは別記事に書きました。

【flex 】ヘッダーの高さをロゴ(可変)の高さに合わせてレスポンシブしたい
ヘッダーのコンテンツをフレックスで横並び。よくあるパターンですよね。 今回、そのよくあるパターンだと思ってたヘッダーでかなりハマってしまったので、備忘録として。 ヘッダーロゴ画像のサイズに合わ...

autoprefixerは大事

私はVSCodeの拡張機能でprefixerを自動的に付与しています。

なのであんまりprefixerについて知識がないのですが、

【css】display:flexで横並びにしたボタンがiphone6・iphone6sでの確認で差異がある|teratail
いつもお世話になっております。 ボックス内にdisplay:flexで二並びのボタンを並べました。 iphone6s、iphone5、Chromeのデベロッパーツールでの確認では特に問題が起きていないのですが、 実機のiphone6(客先のスマホ)で確認した際にのみ、画像のようになってしまいます。

の投稿を拝見して、やっぱり多少prefixerのことを知っとかないとな〜と思った次第です。

 アルファベット縦書きは無理

cssで簡単にできる縦書きですが、IEだとアルファベットが横に寝てしまうんです・・・

text-orientation: upright;

すれば他のブラウザでは大丈夫なんですが、IEは非対応;;

text-orientation
text-orientation は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (writing-mode が horizontal-tb 以外の場合) でのみ効果があります。

 

この記事を書くためにもう一度調べてたら、こんな記事が

CSSでtext-orientationは使ってはいけない

今度縦書きするときにやってみよ。

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で子要素を3等分して並べたい時、普通にcalc( 100% /3 )を指定してたんですが

割り切れない余りをieでは繰り上げてしまうため、他のブラウザでは発生しないカラム落ちが起きてしまいます。ぎゃーー

対処法は33.333%と書くなり、割り切れるようにするなりしかないようです。

まとめ

コーディングやプログラミングを自習してただけのときはブラウザごとの違いなんて、全然気にしてませんでした。

でも実務だと、そうはいかない・・・!

慣れかもしれませんが、別ブラウザチェックはけっこう神経すり減ってます。

 

タイトルとURLをコピーしました