html - 使用 rowspan 时，如何在所有浏览器中正确设置表格行的大小？

Question

我正在尝试使用 rowspan 编写一些简单的 HTML/CSS。我很确定代码是正确的，但它没有给出我期望的结果。此外，每个浏览器都会给出不同的结果。我认为 HTML 应该是一个标准？

可以找到一些简化的代码here .

这就是我要实现的目标。三行表格，高度取决于其内容，中间一行 2px，其余两行平分剩余空间:

这是我在 Chrome 中得到的:

这是我在 Safari 中得到的:

这是我在 Firefox 中得到的:

我试过使用 div 而不是表格(display: table-cell 等)，但它只会导致更多问题，例如结果与页面上的其他元素未对齐。

我的问题是:如何在所有浏览器中一致地实现预期结果？

我宁愿不使用 Javascript 来解决这个问题。

为了避免 XY 问题，这里有一些我追求的实际效果的屏幕截图(在 Chrome 中工作):

这就是 Safari 中的一切:

这是它在 Firefox 中搞砸了:

Answer 1

我会使用 div 而不是表格来解决这个问题。使用父元素和子元素的 position 属性以及子元素上的 transform 属性，以允许它位于带边框的父元素的前面。这将是跨浏览器兼容的。试试这个:

HTML:

<div class="container">
  <h1 class="title"><span>Title</span></h1>
</div>

CSS:

.container {
  position: relative;
  border: 1px solid #000;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.title span {
  display: inline-block;
  padding: 0.2em 0.7em; 
  line-height: 1.5em;
  background-color: #fff;
}