在 IE11 表格单元格的顶部和底部有一个带有填充的边框

Question

我想要一个带有表格单元格的 css 表格，其中的左侧有一个边框(参见小提琴(。它通过绝对定位工作，并在Chrome中使用顶部和底部值。但是在IE11(我猜还有更早的版本(中，边框根本没有显示。实现此目的并使其在所有浏览器(低至 IE9(中工作的最佳解决方案是什么？https://jsfiddle.net/jhparj52/7/

.HTML：

<div class="the-table">
    <div class="cell-containing-border">
        <div class="the-border"></div>
    <div>
</div>
</div>
    <div class="cell-not-containing-border"></div>
</div>

.CSS：

.the-table {
    display: table;
    height: 80px;
    background-color: red;
    width: 80px;
}
.cell-containing-border {
    display:table-cell;
    position: relative;  
}
.the-border {
    top: 10px;
    bottom: 10px;
    position: absolute;
    border-left: 4px solid black;
}
.cell-not-containing-border {
    display: table-cell;
    height: 40px;  
}

Answer 1

添加填充似乎可以解决问题：

.the-table {
  display: table;
  height: 80px;
  background-color: red;
  width: 80px;
}
.cell-containing-border {
  display: table-cell;
  position: relative;
}
.the-border {
  top: 10px;
  bottom: 10px;
  position: absolute;
  border-left: 4px solid black;
  padding: 20px 0px 20px 0;
}
.cell-not-containing-border {
  display: table-cell;
  height: 40px;
}

<div class="the-table">
  <div class="cell-containing-border">
    <div class="the-border">
    </div>
    <div>
    </div>
  </div>
  <div class="cell-not-containing-border">
  </div>
</div>

Answer 2

我能找到的唯一解决方案是为边框设置显式高度。使用父级的固定高度，可以计算高度，以便在顶部和底部获得相同的填充。

.the-table {
  display: table;
  height: 80px;
  background-color: red;
  width: 80px;
}
   
.cell-containing-border {
  display:table-cell;
  position: relative;  
}
    
.the-border {
  top: 10px;
  position: absolute;
  border-left: 4px solid black;
  height: 60px;
}
    
.cell-not-containing-border {
  display: table-cell;
  height: 40px;  
}

<div class="the-table">
  <div class="cell-containing-border">
    <div class="the-border"></div>
    <div></div>
  </div>
  <div class="cell-not-containing-border"></div>
</div>