微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决Css 网格 IE 11:Autoprefixeur 在线与包 npm

我正在使用 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);
-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);
 grid-template-columns:65px minmax(30%,-webkit-max-content) minmax(30%,-webkit-max-content);
 grid-template-columns:65px 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 不能正常工作吗? 谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。