在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

我能找到的唯一解决方案是为边框设置一个明确的高度。通过父母的固定高度，可以计算高度，以便在顶部和底部获得相同的填充。

＆＃13;

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;