FC2ブログ

IEとの戦い(ちょっと専門的かもしれない話)

七海です。
サイトの更新停滞するからブログを更新すると書きながら、またブログでご無沙汰してすみません。

先日、読み切り漫画の作業で詰まったので気分転換にカラーイラスト描いたら、結果的にAZURE登場人物ページの素材ができたので更新しました。閲覧はChrome推奨。Chrome推奨!

先ほど修正しましたが、ほかのブラウザ(特にInternet Explorer)で閲覧した際に、レイアウトが崩れる不具合が発生していました。
今日の夕方までにIEなどでご覧になった方には謝罪いたします。申し訳ございませんでした。

     ※

ここから先、html/cssにがっつり触れたお話。

登場人物ページを更新したその日は、ほくほくした気分でおりました。
そして今日、事業所でwebの勉強のついでに、Internet Explorerで当該ページの表示を確認したのですが、(こら)盛大に崩れていて絶句しました。

ご覧いただくと分かるように、イラストと文章でワンセットになったボックスが一列に二つ横並びになって、それが下に続いていく感じになっています。今は三人なので一列と半分しかないですが。
これ、試験的にcssのflexboxというやつで実装したのです。

それを、IEで見たら、それはもうものの見事にべしゃっとつぶれておりました。
テキストが縦にも横にもはみ出して、さあ大変。

慌てて対応を検索し、box-sizing: border-box;だのmax-width: 100%;だのを指定したりいろいろしまして、横方向はうまく収まったのですが、縦方向がうまくいかず。結果、むりやりIEのときだけheightを指定したらなんとかボックスに収まりました。以下のように。

_:-ms-lang(x), フレックスボックスアイテムのセレクタ名  {
  height: 520px;

ただ、クロームで見るのと比べると、シエルのボックスの文章部分の下が余ったりと違和感がありますので、やはり閲覧はChrome推奨です。

これから、新しげなプロパティを使うときは、IEを確認しながら作業しようと心に誓いました。
そして次こそはブログに何か作品を載せたい……。頑張ります。

ご来訪、ありがとうございます。
スポンサーサイト