html - IE10 最大宽度在固定布局表格列内的图像上失败

Question

当尝试将图像的 max-width 限制为 100% 时，max-width 属性在 IE10 中不起作用在具有一组 宽度 和 table-layout: fixed 的 table cell 中。

如何在保持 table-cell 显示属性的同时强制执行此操作？

CodePen

.row {
  max-width: 700px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
.photo,
.text {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 25%;
  img {
    max-width: 100%;
    height: auto;
  }
}
.text {
  width: 75%;
}
HTML <div class="row"> <div class="photo"><img src="http://lorempixel.com/1000/600/sports/1/" alt="" /></div> <div class="text"> Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus,
officia,
asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt,
ea ipsa eos quidem. Aperiam iste voluptate expedita illum,
suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates,
ad. Pariatur rem similique,
cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione corrupti quod repellat quo,
vitae veritatis et magnam doloribus mollitia tenetur? </div> </div> .row {
  max-width: 700px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
.photo,
.text {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 25%;
  img {
    max-width: 100%;
    height: auto;
  }
}
.text {
  width: 75%;
}

<div class="row">
  <div class="photo">
    <img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
    ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
    corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
  </div>
</div>

Answer 1

问题

发生这种情况是因为您的 table 也有 max-width 和因为 img 是一个内联元素。

解释

min/max-width 不适用于非替换内联元素。

W3C specs says:

10.4 Minimum and maximum widths: min-width and max-width

max-width

Applies to: all elements but non-replaced inline elements, table rows, and row groups

可能的解决方案:

• 你可以在img中设置width:100%

或

• 在table中设置width:700px

.row {
  max-width: 700px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
.photo,
.text {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 25%;
}
.photo img {
  width: 100%;
  height: auto;
}
.text {
  width: 75%;
}

<div class="row">
  <div class="photo">
    <img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
    ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
    corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
  </div>
</div>

注意事项

也出现在 IE11 中。