如何在Internet Explorer中实现.name元素单行显示及max-width兼容

好的，我来帮你搞定IE里让.name元素保持单行显示的问题～首先咱们先捋清楚核心需求：不管是Chrome这类现代浏览器，还是IE，.name里的内容（比如Bob Lee）都得老老实实在一行，不能换行。之前你尝试给.picture加expression的方向有点偏，咱们调整下思路：

一、核心招：强制文本不换行 #

不管是啥IE版本，white-space: nowrap都是最直接有效的办法——它能硬生生把文本按在一行里，IE6及以上都支持这个属性。给.name加上这段CSS就行：

.name {
  font-size: 12px;
  margin-left: 17px;
  white-space: nowrap; /* 核心！禁止文本自动换行 */
  /* 可选：如果文本太长怕溢出，加下面两行处理成省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
}

二、先把.picture的宽度问题搞定 #

你之前用max-width:22px配合expression，其实可以简化不少：

• IE8及以上已经支持max-width了，所以直接保留max-width:22px就行；
• 如果要兼容IE7及以下，直接给.picture设固定宽度width:22px比expression靠谱多了——毕竟IE8开始标准模式下就不支持expression了，容易出幺蛾子：

article .picture {
  max-width: 22px;
  width: 22px; /* 给旧IE兜底的固定宽度 */
}

三、给旧IE（IE9及以下）的Flex布局打补丁 #

如果你的目标浏览器包含IE9及以下，得注意：display:flex（包括-ms-flexbox）在IE9及以下完全不支持，这时候.group的flex布局会失效，.picture和.name会变成块级元素上下堆着。咱们可以用两种办法兼容：

方法1：IE专属条件注释（推荐，清晰不混乱） #

在你的HTML里加这段代码就行，只有IE9及以下会识别：

<!--[if lte IE 9]>
<style>
.group {
  display: block;
  zoom: 1; /* 触发IE的hasLayout，解决浮动塌陷问题 */
}
.group .picture, .group .name {
  float: left; /* 让俩元素横向排在一起 */
}
</style>
<![endif]-->

方法2：CSS媒体查询hack #

如果不想改HTML，也可以用CSS hack，同样只对IE9及以下生效：

/* 仅IE9及以下会读这段 */
@media screen and (min-width: 0\0) {
  .group {
    display: block;
    zoom: 1;
  }
  .group .picture, .group .name {
    float: left;
  }
}

最后整合好的完整代码 #

CSS部分 #

.group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.group img {
  width: 22px;
}
article .picture {
  max-width: 22px;
  width: 22px;
}
.name {
  font-size: 12px;
  margin-left: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* IE9及以下兼容补丁 */
@media screen and (min-width: 0\0) {
  .group {
    display: block;
    zoom: 1;
  }
  .group .picture, .group .name {
    float: left;
  }
}

HTML部分（还是你原来的结构就行） #

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

这样调整完，不管是现代浏览器还是各种版本的IE，.name里的文本都会乖乖待在一行，布局也不会乱～

内容的提问来源于stack exchange，提问作者roarsandmeows