页面在 IE11 上的显示方式问题

Posted 2023-03-06

【中文标题】页面在 IE11 上的显示方式问题

【英文标题】：issue with how page is appearing on IE11

【发布时间】：2020-01-31 20:57:52

【问题描述】：

由于我是 IE11 调试的新手，请多多包涵。

关于信息，此错误仅在 IE11 中发生，Chrome 或 FireFox 等浏览器没有此问题

目前我网页的一部分正在显示

没关系。

但是，当通过不同的属性进行选择并单击其中一个属性时，这就是我所拥有的

据我所知，IE11 没有正确使用/读取 CSS。

这是我的 CSS

        .floor-details-item 
            min-height: 160px;
            width: 100%;
            border: 0.5px solid #C2EFDF;
            border-radius: 2px; 
            margin-bottom: 5px;
            background-color: #FFFFFF;
            padding: 5px;

            &.opac 
                opacity: 0.2;
            

我尝试在 css 中的宽度上添加 !important，但 IE11 拒绝考虑并且仍然给我错误的宽度。

        .floor-details-item 
            min-height: 160px;
            width: 100% !important;
            border: 0.5px solid #C2EFDF;
            border-radius: 2px; 
            margin-bottom: 5px;
            background-color: #FFFFFF;
            padding: 5px;

            &.opac 
                opacity: 0.2;
            

在检查元素时通过 IE11 控制台时，这就是我所拥有的

有趣的是，当我手动更改它并输入 100% 时，如下所示，宽度问题得到修复。

感谢您提供的任何见解。

更新：

---

我在 CSS 上尝试了以下方法。由于这个link 说IE 11 不喜欢!important 的宽度，所以我在css 中添加了以下内容

        .floor-details-item 
            min-height: 160px;
            /*width: 100% !important;*/
            /*adding auto and initial*/
            width: auto;
            width: initial;

但目前还没有。

【问题讨论】：

嗨@Paulie_D，我正在使用IE11。正如我在问题开始时所说，我的代码在 Chrome 或 FF 上没有问题。我可以给你我的代码，但在这种情况下它对你没有帮助。

如果您在此处重新创建它，我们可以在 IE11 中打开它...并进行检查。

@Paulie_D 我试着截取一些代码给你看

您能否发布足够的代码（包括 html 代码和相关的 CSS 样式）以重现 Minimal, Complete, and Verifiable example 中的问题。我们将更容易测试并帮助您解决它。

嗨@ZhiLv-MSFT，让我建立它。昨天晚上我很忙。

【参考方案1】：

尝试添加min-width: 1px;。它救了我很多次；-)

【讨论】：

嗨@johannesdz，谢谢你，但唉，我已经把最小宽度放在CSS中，我仍然有问题。如果您有任何其他提示，我会全力以赴。

你能评论来自 .floor-details 的 css 吗？

你想让我评论什么？

让我这样做@johannesdz

嗨@johannesdz，因为你是唯一回答我问题的人，所以分数是你的。如上所示，我已经找到了我的问题。

【参考方案2】：

经过多次争论以及同事的帮助，我找到了问题所在。

这是由于 css。

    .floor-details 
        width: 44%;
        margin-left: 5px;
        height: 555px;
        float: left;
        background-color: #FFFFFF;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        border-left: 20px solid #C2EFDF;
        overflow-y: auto;
        padding: 5px;
        //display: flex;
        align-items: center;
        flex-direction: column;

        .floor-details-item 
            min-height: 160px;
            width: 100%;
            border: 0.5px solid #C2EFDF;
            border-radius: 2px; 
            margin-bottom: 5px;
            background-color: #FFFFFF;
            padding: 5px;
            //display: flex;
            min-width: 1px;

IE11 不喜欢小时候的display: flex;。正如您从代码中看到的那样，从子级中删除它也意味着从父级中删除它。完成后，问题就解决了。