Css 如何修复？IE、flexbox/grid和img显示内嵌

我正在尝试更改使用display:grid创建的图像网格；因此，它在IE上看起来不错。为了更好地显示图像，找到一种解决方案，在不使用网格或flexbox的情况下并排显示一些图像

下面的代码可以很好地工作，无论是否使用display:grid；。然而，不是在IE浏览器上

要查看的元素： .about__asseenon-images-父级 .关于asseenon-logos-儿童

身体{ 填充：5rem； } @媒体屏幕和最大宽度：900px{ 身体{ 填充：3rem； } } @媒体屏幕和最大宽度：750px{ 身体{ 填充：1rem； } } img{ 宽度：100%； 高度：自动； 显示：块； 保证金：0自动； } .副标题{ 字体系列：舞蹈脚本，草书； 颜色：662d91； 字体大小：2.5rem； 文本对齐：居中； 字体大小：正常； } @媒体屏幕和最大宽度：1350px{ .副标题{ 字号：2rem； 保证金：1rem 0； } } @媒体屏幕和最大宽度：1100px{ .副标题{ 字体大小：1.6rem； } } @媒体屏幕和最大宽度：750px{ .副标题{ 字体大小：1.3rem； } } @媒体屏幕和最大宽度：600px{ .副标题{ 字号：1.1rem； } } .药片{ 显示：无； } @媒体屏幕和最大宽度：900px{ .药片{ 显示：未设置； } } .关于{ 字体系列：Roboto，无衬线； 字体大小：1.3rem； 文本对齐：对齐； 边框宽度：5px； 边框样式：实心； 边框颜色：662d91； } .关于额外费用{ 显示器：flex； 证明内容：周围的空间； 保证金：2rem； 页边顶部：1rem； } .关于额外数字{ 保证金：0； 弹性基准：30%； 弹性收缩：0； } .about_uuExtras-img{ 保证金：0自动； } .关于附加信息{ 弹性收缩：1； 弹性基准：60%； 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； } .关于asseenon-logos{ 高度：自动； 宽度：5%； 显示：内联； 保证金：0.3雷姆； } /* 1-对@support进行评论，以查看我试图获得的结果。 2-在IE上测试此代码。您将看到“徽标”将穿过屏幕并增大大小。 */ @支持显示：-ms网格或显示：网格{ .about__asseenon-images{ 显示：-ms网格； 显示：网格； -ms网格列：minmaxmin内容，1fr[8]； 网格模板列：repeat8，最小webkit最小内容，1fr； 网格模板列：repeat8，minmaxmin内容，1fr； -ms网格行：最小内容[3]； 网格模板行：repeat3，-webkit-min-content； 网格模板行：repeat3，最小内容； 栅柱间隙：1rem； -webkit框对齐：居中； -webkit对齐项目：居中； -ms-flex-align：居中； 对齐项目：居中； 证明项目：中心； } .关于asseenon-logos{ 宽度：90%； 格构柱：跨度2； } .关于asseenon-logos:nth-child5{ -ms网格列：2； -ms格构柱跨度：2； 格构柱：2/2跨； } } 美容和生活方式专家，见： 如果您不使用与任何版本的Internet Explorer look不兼容的@supports，而是通过JavaScript检测浏览器并向主体添加一个类，该怎么办。 要检测浏览器，有一个很好的帖子

在页面中添加包含类的行

为Internet Explorer添加行：我不喜欢在Internet Explorer中使用'Flex'，我从来没有得到好的结果，我更喜欢使用经典的'display:inline block'或'float:left'

如果navigator.userAgent.indexOfMSIE！=-1. || !!document.documentMode==true//如果IE>10 { document.body.className+=“InternetExplorer”； } 身体{ 填充：5rem； } @媒体屏幕和最大宽度：900px{ 身体{ 填充：3rem； } } @媒体屏幕和最大宽度：750px{ 身体{ 填充：1rem； } } img{ 宽度：100%； 高度：自动； 显示：块； 保证金：0自动； } .副标题{ 字体系列：舞蹈脚本，草书； 颜色：662d91； 字体大小：2.5rem； 文本对齐：居中； 字体大小：正常； } @媒体屏幕和最大宽度：1350px{ .副标题{ 字号：2rem； 保证金：1rem 0； } } @媒体屏幕和最大宽度：1100px{ .副标题{ 字体大小：1.6rem； } } @媒体屏幕和最大宽度：750px{ .副标题{ 字体大小：1.3rem； } } @媒体屏幕和最大宽度：600px{ .副标题{ 字号：1.1rem； } } .药片{ 显示：无； } @媒体屏幕和最大宽度：900px{ .药片{ 显示：未设置； } } .关于{ 字体系列：Roboto，无衬线； 字体大小：1.3rem； 文本对齐：对齐； 边框宽度：5px； 边境风格：那么 盖子 边框颜色：662d91； } .关于额外费用{ 显示器：flex； 证明内容：周围的空间； 保证金：2rem； 页边顶部：1rem； } .关于额外数字{ 保证金：0； 弹性基准：30%； 弹性收缩：0； } .about_uuExtras-img{ 保证金：0自动； } .关于附加信息{ 弹性收缩：1； 弹性基准：60%； 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； } .关于asseenon-logos{ 高度：自动； 宽度：5%； 显示：内联； 保证金：0.3雷姆； } /* 1-对@support进行评论，以查看我试图获得的结果。 2-在IE上测试此代码。您将看到“徽标”将穿过屏幕并增大大小。 */ @支持显示：-ms网格或显示：网格{ .about__asseenon-images{ 显示：-ms网格； 显示：网格； -ms网格列：minmaxmin内容，1fr[8]； 网格模板列：repeat8，最小webkit最小内容，1fr； 网格模板列：repeat8，minmaxmin内容，1fr； -ms网格行：最小内容[3]； 网格模板行：repeat3，-webkit-min-content； 网格模板行：repeat3，最小内容； 栅柱间隙：1rem； -webkit框对齐：居中； -webkit对齐项目：居中； -ms-flex-align：居中； 对齐项目：居中； 证明项目：中心； } .关于asseenon-logos{ 宽度：90%； 格构柱：跨度2； } .关于asseenon-logos:nth-child5{ -ms网格列：2； -ms格构柱跨度：2； 格构柱：2/2跨； } } /*Internet Explorer修复程序*/ .InternetExplorer.关于额外费用{ 显示：相对； } .InternetExplorer.关于额外数字{ 宽度：30%； 显示：内联块 } .InternetExplorer.关于附加信息{ 宽度：60%； 显示：内联块 } .InternetExplorer.about\u asseenon-images{ 文本对齐：居中； } .InternetExplorer.关于asseenon-logos{ 显示：内联块； 利润率：2%2%； 宽度：19%； } .InternetExplorer.about_uuAsseenon-logos:nth-of-type7{ 保证金权利：5%； } .InternetExplorer.about__asseenon-logos:nth-of-type5{ 左缘：5%； } 美容和生活方式专家，见：

---

谢谢雨果，问题是我不明白为什么IE中的徽标会像你在第一张图片中看到的那样显示。我想找到一种方法，使他们显示像第二个图像在IE。