IE10 最大宽度在固定布局 table 列内的图像上失败

Question

当尝试将图像限制为 100% 的 max-width 时，max-width 属性在 table cell 中无法在 IE10 中使用一组 width 和一组 table-layout: fixed.

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

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

Answer 2

在您的 CSS 中，而不是：

.photo{
  width: 25%;
   img{
    max-width: 100%;
    height: auto;
  }
}

尝试：

.photo{
   width: 25%;
}
.photo img{
   max-width:170px; /* Or another size*/
   width:100%;
   height: auto;
}

除了将两个元素分开外，这还表示“将我的图像设为 100%，除非它大于 170 像素。也在 IE 中进行了测试。

IE10 最大宽度在固定布局 table 列内的图像上失败

IE10 max-width fails on image inside fixed layout table columns

html

css

internet-explorer

image

width

问题

说明

可能的解决方案：

备注