🐛[BUG] umi4+antdpro layout样式错误

[lppoi]

🐛 bug 描述

🏞 期望结果

© 版本信息

• ProComponents 版本: 2.2.0
• umi 版本 4
• 浏览器环境 360 13版本内核chrome86
• 开发环境 windows

🚑 其他信息

[DJGDragon]

同bug 花了一天找bug 以为自己的配置项错了 换了火狐浏览器就好了才知道是兼容的问题

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

您好，根据您提供的信息，您是使用 ProComponents 版本为 2.2.0，umi 版本为 4， 在 360 浏览器 13 版本内核 chrome86 环境下，出现了 layout 样式错误的问题，期望结果应该是类似于如下的布局：

经过您的排查，发现是兼容性的问题，换了火狐浏览器后问题解决。

建议您可以尝试在代码中添加浏览器兼容性的前缀。可以使用 PostCSS 插件 autoprefixer 来自动添加前缀，具体使用请参考其官方文档 autoprefixer。

如果添加前缀也不能解决问题，您可以检查是否有其他样式文件对该布局产生影响，例如覆盖了 ProComponents 的样式，可以使用浏览器的开发者工具进行排查。另外，也建议您更新浏览器版本，以获得更好的兼容性体验。

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

根据您提供的信息，您是使用 ProComponents 版本为 2.2.0，umi 版本为 4， 在 360 浏览器 13 版本内核 chrome86 环境下，出现了 layout 样式错误的问题，期望结果应该是类似于如下的布局：

经过您的排查，发现是兼容性的问题，换了火狐浏览器后问题解决。

建议您可以尝试在代码中添加浏览器兼容性的前缀。可以使用 PostCSS 插件 autoprefixer 来自动添加前缀，具体使用请参考其官方文档 autoprefixer。

在本地安装 autoprefixer，然后在配置文件中添加如下配置即可：

import autoprefixer from 'autoprefixer';

export default {
  // ...省略其他配置
  devtool: 'source-map',
  extraPostCSSPlugins: [
    autoprefixer({
      overrideBrowserslist: [
        '>1%',
        'last 2 versions',
        'Firefox ESR',
        'not ie < 11',
      ],
      grid: true,
    }),
  ],
  // ...省略其他配置
};

这个配置中的 overrideBrowserslist 表示兼容的浏览器列表，不兼容的浏览器会在 css 中添加前缀。grid 表示是否为 grid 布局添加兼容性前缀

如果添加前缀也不能解决问题，您可以检查是否有其他样式文件对该布局产生影响，例如覆盖了 ProComponents 的样式，可以使用浏览器的开发者工具进行排查。另外，也建议您更新浏览器版本，以获得更好的兼容性体验。

[lppoi]

同bug 花了一天找bug 以为自己的配置项错了 换了火狐浏览器就好了才知道是兼容的问题

找到解决方法了 删除pro-component ,安装peo-layout 6.x版本的包 ，7.x样式就不兼容了

[lppoi]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

根据您提供的信息，您是使用 ProComponents 版本为 2.2.0，umi 版本为 4， 在 360 浏览器 13 版本内核 chrome86 环境下，出现了 layout 样式错误的问题，期望结果应该是类似于如下的布局：

经过您的排查，发现是兼容性的问题，换了火狐浏览器后问题解决。

建议您可以尝试在代码中添加浏览器兼容性的前缀。可以使用 PostCSS 插件 autoprefixer 来自动添加前缀，具体使用请参考其官方文档 autoprefixer。

在本地安装 autoprefixer，然后在配置文件中添加如下配置即可：

import autoprefixer from 'autoprefixer';

export default {
  // ...省略其他配置
  devtool: 'source-map',
  extraPostCSSPlugins: [
    autoprefixer({
      overrideBrowserslist: [
        '>1%',
        'last 2 versions',
        'Firefox ESR',
        'not ie < 11',
      ],
      grid: true,
    }),
  ],
  // ...省略其他配置
};

这个配置中的 overrideBrowserslist 表示兼容的浏览器列表，不兼容的浏览器会在 css 中添加前缀。grid 表示是否为 grid 布局添加兼容性前缀

如果添加前缀也不能解决问题，您可以检查是否有其他样式文件对该布局产生影响，例如覆盖了 ProComponents 的样式，可以使用浏览器的开发者工具进行排查。另外，也建议您更新浏览器版本，以获得更好的兼容性体验。

感谢解答，试了autoprefixer不行 把layout版本切到6.x布局正常了

[chenshuai2144]

https://github.com/ant-design/pro-components/issues/6708

看这里