在 Internet Explorer 中启用最大宽度答案

【问题标题】：enabling max-width in Internet Explorer在 Internet Explorer 中启用最大宽度
【发布时间】：2021-01-04 13:16:55
【问题描述】：

我已经实现了最大宽度，因此 .name 的内容占用 1 行而不是 2 行。所以而不是：

鲍勃李

看起来不错

鲍勃·李

在其他浏览器中。例如铬

我发现 IE 不支持 max-width - 我该如何解决问题，以使 .name 的内容同样在 IE 中也只占用 1 行？

我试过了

article .picture {
 width: expression(22 + "px");
 }

但这并没有做任何事情。

 .group {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   margin, padding: 0px;
  }

    .group img {
    width: 22px;
  }

    article .picture {
    max-width: 22px;
     width: expression(22 + "px");
  }

   .name {
    font-size: 12px;
    margin-left: 17px;
  }


  <article> 
    <a href="#">
      <div class="photo" style="background-image: url(img/img.jpg);"></div>
    </a>
      <div class="text">
      <div class="A">Lorem ipsum</div>
      <div class="B">Lorem ipsum</div>
      </div>
      <div class="C">
      <div class="group">
      <div class="picture"><img src="img/sample.jpg"></div> 
      <div class="name">Bob Lee</div>
      </div>
      </div>
  </article>

【问题讨论】：

您在哪个版本的 Internet Explorer 上遇到了问题？ Expression() 是我很久没见过的东西了。
我相信它在 IE 9、10、11 中不起作用。如果 IE 9 不起作用也没关系，但我希望它在 IE 10 和 11 上起作用。表达式 () -- > 我在一篇博文中看到并尝试过
@roarsandmeows 为什么不使用white-space: nowrap; 来避免将名称换行到第二行？
@OzgurSar 它的 b/c 有时名称很长，所以它实际上需要占用 2 行。
@roarsandmeows 但在问题的第一行中，您写的就像您试图避免将名称拆分为多行一样。对不起，我的误解。我对 IE 特定的 css 不是很熟悉

标签： css internet-explorer

【解决方案1】：

我尝试在 IE 11 浏览器中检查和测试示例代码，发现 .name 类中的 -ms-flex: 1; and flex: 1; 导致了此问题。

IE 11 与Flex 存在一些已知问题。这可能是导致此问题的原因。

如果您评论或删除 .name 类中的 flex，那么问题将得到解决。

.name 类：

.name {
    letter-spacing: 2.2px; 
   -webkit-box-flex:  1;
   /*-ms-flex:  1;
   flex:  1;*/
   line-height: 1.6;
  }

输出：

【讨论】：