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中，图片基本上是全尺寸的，而且约束只是被忽略了。我该如何解决这个问题？

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

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

尝试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>

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

1 个答案: