Question

我正在使用 Css Grid，但我在使用 autoprefixer 时遇到了一些问题。我在IE中使用时注意遵守一些条件。这是 sass 的一部分：

 .wrapper-bloc-horaire {

      /*! autoprefixer grid: autoplace */
      display: grid;
      grid-template-columns: 65px minmax(30%, max-content) minmax(30%,max-content);
      grid-template-rows: 30px 25px;
      grid-template-areas: "image titre titre"
                            "image depart arrive";
      grid-column-gap: 2rem;


      div:first-of-type {
        grid-area: image;
      
        place-self: center;
      }

      .s-title4 {
        grid-area: titre;
       
      }

      .resume-line:nth-of-type(2) {
        grid-area: depart;
      }
      .resume-line:nth-of-type(3) {
        grid-area: arrive;
      }
}

我的 webpack 配置：

use: [
                { loader: MiniCssExtractPlugin.loader },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        url: false,
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        postcssOptions: {
                            plugins: [
                                [
                                'autoprefixer',
                                ],
                            ],
                        },
                    }
                },
                "sass-loader"
            ],

我的浏览器列表：

"browserslist": ["> 1%","IE 11"]

当我使用该配置运行 webpack 时，只有 ...

display:-ms-grid;
display:grid;
-ms-grid-columns:65px 2rem minmax(30%,max-content) 2rem minmax(30%,max-content);
grid-template-columns:65px minmax(30%,max-content) minmax(30%,max-content);
-ms-grid-rows:30px 25px;grid-template-rows:30px 25px;

... 是前缀。但是当我尝试 autoprefixer online 时，一切正常，输出良好：

.wrapper-bloc-horaire{
 display:-ms-grid;
 display:grid;
 -ms-grid-columns:65px 2rem minmax(30%,max-content) 2rem minmax(30%,max-content);
 grid-template-columns:65px minmax(30%,-webkit-max-content) minmax(30%,-webkit-max-content);
 grid-template-columns:65px minmax(30%,max-content) minmax(30%,max-content);
 -ms-grid-rows:30px 25px;
 grid-template-rows:30px 25px;
 grid-template-areas:"image titre titre" "image depart arrive";
 grid-column-gap:2rem
}
.block-resume-container .wrapper-bloc-horaire [class$=col1]{
  -ms-grid-row:1;
  -ms-grid-row-span:2;
  -ms-grid-column:1;
  grid-area:image;
  -ms-grid-row-align:center;
  -ms-grid-column-align:center;
  place-self:center
}
.block-resume-container .wrapper-bloc-horaire .s-title4{
  -ms-grid-row:1;
  -ms-grid-column:3;
  -ms-grid-column-span:3;
  grid-area:titre
}
.block-resume-container .wrapper-bloc-horaire .resume-line:nth-of-type(2){
  -ms-grid-row:2;
  -ms-grid-column:3;
  grid-area:depart
}
.block-resume-container .wrapper-bloc-horaire .resume-line:nth-of-type(3){
  -ms-grid-row:2;
  -ms-grid-column:5;
  grid-area:arrive
}

你知道为什么 autoprefixer 不能正常工作吗？谢谢！

Css 网格 IE 11：Autoprefixeur 在线与包 npm

0 个答案: