在Internet Explorer中启用最大宽度 [英] enabling max-width in Internet Explorer

问题描述

我已经实现了最大宽度，因此.name的内容占用1行vs 2行.因此，代替:

鲍勃李

看起来正确

李小龙

在其他浏览器中.例如铬

我发现IE虽然不支持最大宽度-我该如何解决问题，以便.name的内容在IE中也只占用1行?

我尝试过

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

但这没做任何事情.

  .group {显示:-webkit-box;显示:-ms-flexbox;显示:flex;-webkit-box-align:中心;-ms-flex-align:居中；align-items:居中;边距，填充:0px;}.group img {宽度:22像素；}文章.picture {最大宽度:22px；宽度:expression(22 +"px");}.名称 {font-size:12px;左边距:17px;}<文章>< a href ="#">< div class =照片"；style ="background-image:url(img/img.jpg);"</div></a>< div class =文本">< div class ="A"” Lorem ipsum</div>< div class ="B"" Lorem ipsum</div></div>< div class ="C">< div class ="group">< div class =图片">< img src ="img/sample.jpg"</div< div class =名称"> Bob Lee</div></div></div></article> 

解决方案

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

IE 11的

I've implemented max-width so that content for .name takes up 1 line vs 2 lines. So instead of:

Bob Lee

it correctly looks

Bob Lee

in other browsers. e.g. chrome

I've found that IE doesn't support max-width though - how can I fix things so that content for .name similarly takes up just 1 line in IE too?

I've tried

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

but this didn't do anything.

 .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> 

解决方案

I try to check and test the sample code in the IE 11 browser and found that -ms-flex: 1; and flex: 1; in the .name class was causing this issue.

IE 11 has some knows issues with the Flex. This is can be the reason for this issue.

If you comment or remove the flex in the .name class then the issue will be fixed.

.name class:

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

Output:

这篇关于在Internet Explorer中启用最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！