表格中的图像：如何使 Firefox 的行为与 IE 相同

Posted 2023-03-06

【中文标题】表格中的图像：如何使 Firefox 的行为与 IE 相同

【英文标题】：Images in table: How to make Firefox act same like IE

【发布时间】：2017-06-10 19:03:04

【问题描述】：

我有一张固定高度的桌子。 其中有 2 行固定高度和 2 行包含图像。 这些带有图像的单元格应均匀分布在剩余的高度上。

Safari、Chrome 和 IE 按我的意愿行事：表格高度为 500 像素。 Firefox 只是忽略了我的表格的固定高度并以全高显示图像！

如何让 Firefox 像 Internet Explorer 一样工作？

img object-fit: cover; height: 100%; width: 100%; 

table   
  height:500px; width:100%; 
  table-layout: fixed; 

td.static  height:20px 

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
  </tr>
  <tr>
    <td>
      <img  src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
  </tr>
</table>

【问题讨论】：

你能发布两个结果的截图吗？

内联css用-moz-前缀的firefox不好写

代码破坏了 Chrome

而且 IE 似乎不支持 object-fit 所以我不确定你正在尝试和看到什么：developer.mozilla.org/en-US/docs/Web/CSS/object-fit

谁还在用IE？

【参考方案1】：

这不会破坏 Chrome。表格标签上的内联样式确实

img object-fit: cover; height: 100%; width: 100%; 

table   
  height:500px; width:100%; 
  table-layout: fixed; 

td.static  height:20px 

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
    <tr>
      <td>
        <img  src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
      </td>
    </tr>
    <tr>
    <td class="static">static height</td>
    </tr>
</table>

【讨论】：

谢谢我更正了。但这并不能解决问题。只需在 Chrome 和 Firefox 中观看此示例

如果 IE 不支持 CSS，那么 IE 没有按照您的预期进行。如果 FX 和 Chrome 对 CSS 做出反应，那么区别在于不执行您要求它执行的操作的浏览器和执行此操作的浏览器

但是 IE、Safari 和 Chrome 以相同的方式显示它。 Firefox 会忽略表格的高度并将图像的大小调整为全高。我需要知道如何让 Firefox 以同样的方式显示

【参考方案2】：

如何将图像添加为背景：

/*img object-fit: cover; height: 100%; width: 100%; 
*/
td:not(.static) 
  background-image: url("http://lorempixel.com/output/animals-q-c-300-230-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

table   
  height:500px; width:100%; 
  table-layout: fixed; 

td.static  height:20px 

<table>
  <tr>
    <td>
      <!--<img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">-->
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
    <tr>
      <td>
        <!--<img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">-->
      </td>
    </tr>
    <tr>
      <td class="static">static height</td>
    </tr>
</table>

jsfiddle：jsfiddle.net/L03jppr6

---

firefox 的问题是它希望父元素定义一些大小（如果你不设置它，假设auto，它会扩展），所以只需添加一些height 到它：

我建议为此使用变量，这将使以后的编辑更容易，因为您只需在一个地方进行更改。

img object-fit: cover; height: 100%; width: 100%; 

:root 
--staticTDs: 2; /* number of static tds */


td.static  height:20px 

td:not(.static) 
  height: calc( (500px - var(--staticTDs) * 20px) / var(--staticTDs) );
  /* (tableHeight - numberofTDs * heightofStaticTDs) / numberofTDs */


table   
  height:500px; width:100%; 
  table-layout: fixed; 

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
    <tr>
      <td>
        <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
      </td>
    </tr>
    <tr>
      <td class="static">static height</td>
    </tr>
</table>

jsfiddle：jsfiddle.net/L03jppr6/1

---

或者你可以一路走下去，为所有元素定义变量。

img object-fit: cover; height: 100%; width: 100%; 

:root 
--staticTDs: 2; /* number of static tds */
--staticTDheight: 20px; /* height of static tds */
--tableHeight: 500px; /* height of table */


td.static  height: var(--staticTDheight) 

td:not(.static) 
  height: calc( (var(--tableHeight) - var(--staticTDs) * var(--staticTDheight)) / var(--staticTDs) );
  /* (tableHeight - numberofTDs * heightofStaticTDs) / numberofTDs */


table   
  height: var(--tableHeight); width:100%; 
  table-layout: fixed; 

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
    <tr>
      <td>
        <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
      </td>
    </tr>
    <tr>
      <td class="static">static height</td>
    </tr>
</table>

【讨论】：

好主意，但我需要这些 img 标签

为什么需要 img 标签？无论如何，Firefox 的问题是 object-fit 期望父元素定义大小。因此，只需添加一些即可。我已经编辑了答案。