Skip to main content
質問文の書式を整えてみました (内容は同じものです)
ソース リンク

Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。

崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。

HTML

<div class="grid">
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト 
    </div>
    <div class="item">
    テスト
    </div>
</div
 

gulpfile.js

autoprefixer({
 grid: true,
 browsers: ["ie >= 11"]
})
 

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}

Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。

崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。

<div class="grid">
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト 
    </div>
    <div class="item">
    テスト
    </div>
</div
 
autoprefixer({
 grid: true,
 browsers: ["ie >= 11"]
})
 
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}

Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。

崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。

HTML

<div class="grid">
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト 
    </div>
    <div class="item">
    テスト
    </div>
</div

gulpfile.js

autoprefixer({
 grid: true,
 browsers: ["ie >= 11"]
})

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}
ソース リンク

autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる

Gulpでautoprefixerを用いていて、コンパイル後のcssには-ms-のベンダープレフィックスは追加されているのですが、IE11だとレイアウトが崩れてしまいます。

崩れるというよりも具体的にはレイアウトが一つだけになってしまいます。

<div class="grid">
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト
    </div>
    <div class="item">
    テスト 
    </div>
    <div class="item">
    テスト
    </div>
</div

autoprefixer({
 grid: true,
 browsers: ["ie >= 11"]
})

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}