AIRIです♪

フロントエンドのコーティングにおいて、各ブラウザでの表示崩れへの対応で、特に IEの表示崩れに悩まされる人はかなり多いのではないかと思います。
旧バージョンのサポートが終了しているとはいえ、現状windows 10に標準搭載されているIE 11に関しては、まだまだ数年はサポートは続くので、しばらくは IEを無視することは出来ない状態ですね。

今回、私が実際行ったIEの表示崩れ対策を詳細していきたいと思います。

使用環境

mac OX Mojave 10.14.6
Nuxt.js 2.10.0

以下の環境を使用して、ローカルサーバーにてIE画面を確認しています。

virtual Box 6.1
Internet Explorer 11

※google chromeやsafariなどの検証ツールを使ってでのIE表示だと普通に表示されてしまう部分があるので、同環境か、実際のwindowsを使用してでの確認をお勧めします。

エラー内容と対策

変数が適用されない

cssのカスタムプロパティを使用してvarで変数を使おうとすると、適用されません。

<IE検証画面>


:rootで変数を設定しても、適用されません。

対策

プラグイン、postcss-custom-properties を使用して、静的cssに変換する。

  1. postcss-custom-properties をインストールする。

  2. 全ての変数を、一つのcssファイルにまとめる。

    customProperty.css
    :root {
      --sample-color: #fff;
    }
  3. nuxt.config.jsに、
    postcss: {
        plugins: [     
          require('postcss-custom-properties')({
            preserve: false,
            importFrom: ['client/assets/styles/customProperty.css']
          }),
        ]
      }, 
    // preserve: false → コンパイル後にカスタムプロパティを残すかどうかの設定
    // importFrom: ['~.css'] → 変数をまとめたcssのパス

こうすると、以下のようにコンパイルされます。

:root {
    --sample-color: #fff;
}
.div {
    back-ground: var(--sample-color);
}

/*コンパイル後*/ 
.div {
    back-ground: #fff;
}

class名が適用されない

HTML 4.01の定義に沿ってclass名が設定されていないと、class名が適用されません。

/* アンダーバー始まり…OK */ 
.__classname {
}

/* ハイフン始まり…NG */ 
.--classname {
}

/* ハイフン + 数字始まり…NG */ 
.1st {
}

/* ハイフン始まり…NG */ 
.-1st {
}

<参照記事>
https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad

特に、--close、--active など、" -- "始まりのclass名は使うことがあるかと思うので、注意が必要です。

対策

規定に沿って書き直します。

:例)

.toggle--close {
    display: none;
}

flexと、position併用で要素幅が何故か残る

positionも結構バグがありますね…。
色々バグがある中で、ネット検索してもあまり記事が出てこない、"flexと position併用で、要素幅が何故か残る "と言う現象が起きました。

やりたいこと
<ul class="circle-list">
    <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li> 
</ul>
.circle-list {
    display: flex;
    position: relative;
}

/* 擬似要素で、○の後ろのボーダーを作成 */
.circle-list :before {
      content: '';
      height: 1px;
      width: 100%;
      background-color: var(--border-color);
      position: absolute;
      top: 20px;
      left: 0;
}
google chrome

Internet Explorer

何故か要素が完全に浮かない。(右端に幅が残る)

ちなみに、擬似要素を消すと、ちゃんと端っこまで、コンテナが伸びる…謎。

対策

試したこと
  • 擬似要素:before、:after両方で検証
  • 親要素、子要素、どちらもpaddingやmarginを0で設定
  • 全体をdivでラップし、一番外のdivにposition: relativeを設定

ダメでした…。

対策

flexに影響のない場所に、positionを設定する要素を設置する。

<div class="wrap">
    <span class="border"></span>
    <ul class="circle-list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li> 
    </ul>
</div>
.wrapp {
    position: relative;
}

/* 空のspanタグでボーダーを作る */
.border {
      content: '';
      height: 1px;
      width: 100%;
      background-color: var(--border-color);
      position: absolute;
      top: 20px;
      left: 0;
}

.circle-list {
    display: flex;
}

すると、ちゃんとこうなる。