样式不兼容 ，大家怎么解决的？

[zouyi741599086]

用了prolayou，发现常用的搜狗浏览器不兼容很多样式，大家都这样？还是怎么解决（自己修改样式）？

padding-inline
padding-block
inset-inline-end
inset-block-start

[mushroomlb]

// 内容区域宽度
.ant-pro-page-container .ant-pro-page-container-warp-page-header~.ant-pro-grid-content.ant-pro-page-container-children-content {
  margin: 6px !important;
  height: '100%';
  padding-inline:9px !important;
}

[pangxzi]

// 内容区域宽度
.ant-pro-page-container .ant-pro-page-container-warp-page-header~.ant-pro-grid-content.ant-pro-page-container-children-content {
  margin: 6px !important;
  height: '100%';
  padding-inline:9px !important;
}

好像还有好多组件都不兼容了

[drizzlesconsin]

是不是用了 Umi4 打包的，如果是 去 umi 那边翻下文档，有解法。cssMinifier: 'cssnano'

[zouyi741599086]

是不是用了 Umi4 打包的，如果是 去 umi 那边翻下文档，有解法。cssMinifier: 'cssnano'

我是用create-react-app 构建的应用，我也去看了下umi的cssMinifier配置，这只是配置css压缩的
问题是很多样式不兼容，不是配置压缩的问题，我看了下antd5官网：https://next.ant.design/components/overview-cn/
搜狗浏览器浏览的时候全部错乱（谷歌、火狐正常），v5的组件如果都用了这些不兼容的样式话那恼火了

[drizzlesconsin]

v5 开始好像不支持 IE11 了 ant-design/ant-design-pro#10181 (comment) ant-design/ant-design-pro#9958 (comment)

删除的功能

区块功能
删除对 IE 的支持，如果对 IE 有需求，请使用旧版本，（react，antd 都将不支持的 ie11）

[pangxzi]

v5 开始好像不支持 IE11 了 ant-design/ant-design-pro#10181 (comment) ant-design/ant-design-pro#9958 (comment)

删除的功能

区块功能 删除对 IE 的支持，如果对 IE 有需求，请使用旧版本，（react，antd 都将不支持的 ie11）

360的极速模式也不支持

[chenshuai2144]

太低版本的浏览器也不提供支持了，
让我们的维护成本太高了

极速浏览器最高也就 78 内核，无力吐槽

[Tzng]

太低版本的浏览器也不提供支持了， 让我们的维护成本太高了

极速浏览器最高也就 78 内核，无力吐槽

pro-components 不能和antd一样进行进行降级处理吗。
antd的文档：https://ant-design.gitee.io/docs/react/compatible-style-cn

[chenshuai2144]

支持的用法相同

[Tzng]

支持的用法相同

我看您在另一个issue进行了回复：#6195

你提到说_要用 ProComponents 的 ProConfigVide_请问一下，这个配置是在哪，我在文档中没有找到它的配置项

Thanks♪(･ω･)ﾉ

[wushangwei]

我也遇到了类似的问题，在最新版本的浏览器上显示正常，但在老版本（如83版本的chromium）上显示异常，最后通过参考https://umijs.org/docs/api/runtime-config#rootcontainerlastrootcontainer-args和https://ant.design/docs/react/compatible-style-cn基本解决。

方法就是在src/app.tsx添加下面的函数：

export function rootContainer(container) {
  return (
  <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
    {container}
  </StyleProvider>
);
}

[XXuain]

我也遇到這個問題了 但是依照官網的方式添加 <StyleProvider /> 後 沒有效果

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    {/* <ConfigProvider theme={{ hashed: false }}> */}
      <StyleProvider
        hashPriority="high"
        transformers={[legacyLogicalPropertiesTransformer]}
      >
      <RouterProvider router={router} />
      </StyleProvider>
    {/* </ConfigProvider> */}
  </React.StrictMode>
)

反而是加了 <ConfigProvider theme={{ hashed: false }}> 這樣子 antd 有效果，但 antd pro-components 依舊無法支持兼容

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ConfigProvider theme={{ hashed: false }}>
      {/* <StyleProvider
        hashPriority="high"
        transformers={[legacyLogicalPropertiesTransformer]}
      > */}
      <RouterProvider router={router} />
      {/* </StyleProvider> */}
    </ConfigProvider>
  </React.StrictMode>
)

使用的版本：

    "@ant-design/cssinjs": "^1.16.0",
    "antd": "^5.6.2",
    "@ant-design/pro-components": "2.4.3",
    "@ant-design/icons": "^5.1.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite": "^4.3.9"

想請問有什麼方式能讓 pro-components 和 antd 一樣能支持舊版瀏覽器嗎？
就是不要使用 :where 選擇器ＱＱ

[chenshuai2144]

注意下 "@ant-design/cssinjs": "^1.16.0",

要和antd 里面的一样，不然就会不生效

[lkh-zzz]

我也遇到了类似的问题，在最新版本的浏览器上显示正常，但在老版本（如83版本的chromium）上显示异常，最后通过参考 https://umijs.org/docs/api/runtime-config#rootcontainerlastrootcontainer-args 和 https://ant.design/docs/react/compatible-style-cn 基本解决。

方法就是在src/app.tsx添加下面的函数：

export function rootContainer(container) {
  return (
  <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
    {container}
  </StyleProvider>
);
}

请问一下用了您的方法确实成功了，但是message语句确实失效了，您这边遇到过这种问题吗 message.success 或者error都是不再提示了

[awesomeWay]

太低版本的浏览器也不提供支持了， 让我们的维护成本太高了

极速浏览器最高也就 78 内核，无力吐槽