在 Internet Explorer 中启用最大宽度

Question

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

鲍勃李

它看起来正确

鲍勃·李

在其他浏览器中。例如chrome

我发现 IE 不支持最大宽度 - 我该如何解决问题，以便 .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>

Answer 1

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

IE 11 与 Flex 有一些已知问题。这可能是此问题的原因。

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

.姓名class:

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

输出：

在 Internet Explorer 中启用最大宽度

enabling max-width in Internet Explorer

css

internet-explorer