Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@shimamar

ChromeでうまくいったものをIEにするとうまくいかなかったこと事例

More than 1 year has passed since last update.

はじめに

WEBページ制作においてどのブラウザでも表示できることはとても大切だと思います。
今回Chromeでうまく表示できていたものがIEではうまくできなかったことと、解消方法を備忘録として記載します。事例が追加されれば追記したいと思います。

① 画像が表示できない

Chromeでは問題なく表示できていた画像がIEだと出てこない。。。。orz

解決方法

調べるとカラーモードが 「CMYK」 になっているとIEでは表示されないとのこと。
画像軽量化ツールを利用し画像を軽量化することで解決できました!

■参考サイト
JPGなどの画像が表示されない原因、チェックしたいこと まとめ

② flex-directionを指定すると余計な余白が発生する

Chromeでは出なかった不自然な余白がIEで発生し、確認したところflex-directionを指定している箇所でした。

どうやら flex-directioncolumncolumn-reverse を指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしうとのことです。この元サイズの高さ分のスペースを消す必要があります。

解決方法

min-height: 0%; を指定することで解決できました!

■参考サイト
flex-directionを指定した時に IE11で表示がおかしくなる

まとめ

まだまだ初心者なのでブラウザごとに表示状況が変わっていることにかなりストレスを感じていましたが、きちんと調べて対処していけば解消できる(と思う)ので、これからもトライしていきます。

また、これからまだまだたくさんでてくることだと思うので随時更新していきます!

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shimamar
30歳で未経験からエンジニアになるため転職し、仕事でHTML/CSS/JSを触りながら独学でphpを勉強中。仕事や独学で習得したことや勉強したことをアウトプットしていければと思います。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?