非 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

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

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

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

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>