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

Posted 2023-03-06

【中文标题】IE10 最大宽度在固定布局表列内的图像上失败

【英文标题】：IE10 max-width fails on image inside fixed layout table columns

【发布时间】：2016-11-10 08:29:05

【问题描述】：

当尝试将图像限制为max-width 或100% 时，max-width 属性在带有一组width 和table-layout: fixed 的table cell 中无法在IE10 中工作。

如何在保持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/"  /></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/"  />
  </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>

【参考方案1】：

问题

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

说明

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

W3C specs says:

10.4 最小和最大宽度：min-width 和 max-width

max-width

适用于：所有元素，但不可替换的内联元素、表格 行和行组

可能的解决方案：

你可以在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/"  />
  </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 中。

【讨论】：

感谢您的详细解释！我想知道为什么将图像的显示属性更改为阻止不能解决问题。那么是否仅仅是因为“表格”的最大宽度？

是的，因为max-width 应用于表格。

【参考方案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 中测试。