html - 非 Chrome 浏览器以奇怪的方式显示表格

Question

我有一个像这样的表格元素

div {
  max-width: 500px;
}
.tab {
  width: 100%;
}
.tablepadding {
  padding-left: 15px;
  padding-right: 15px;
}

<div>
  <table class="tab">
    <tr>
      <td>text</td>
      <td>picture.jpg</td>
    </tr>
  </table>
</div>

内容在 Chrome 和 Edge 中正常显示。我遇到的问题是，在 Firefox 或 IE 中，图片基本上是全尺寸的，约束被忽略了。我该如何解决？

我还有一个问题。我有一个高度设置为 100vh 的元素。在 Chrome 中，它可以完美地设置其大小，使其恰好显示在整个屏幕上。所有其他浏览器都不会这样做。我该如何解决这个问题？

Answer 1

The content is displayed normally in Chrome and Edge as it should be. The problem I have is that in Firefox or IE the picture is basically full size and the constrains are just ignored. How would I fix that?

1. 使用 table-layout: fixed CSS 属性和值来控制表格。请注意，在演示中我将 td 宽度设置为 20% 和 80%，并将高度设置为 200px。

Also I have another issue. I have an element that has height set to 100vh. In Chrome it works perfectly setting its size just right to display over the whole screen. Every other browser does not do that. How would I fix this?

1. 尝试 min-height: 100vh 我在演示中将它应用于类 .overlay 的 div。

div {
  max-width: 500px;
}
.tab {
  width: 100%;
  table-layout: fixed;
  border: 1px solid yellow;
}
td {
  border: 1px solid blue;
}
td:first-child {
  width: 20%;
  height: 200px;
}
td:last-child {
  width: 80%;
}
.tablepadding {
  padding-left: 15px;
  padding-right: 15px;
}
.overlay {
  background: rgba(0, 0, 0, .3);
  border: 5px solid red;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

<div class='overlay'>
  <table class="tab">
    <tr>
      <td>text</td>
      <td>picture.jpg</td>
    </tr>
  </table>
</div>