在 IE11 中 table-cell 的顶部和底部有一个带有填充的边框

Question

我想要一个 css table，里面有一个 table 单元格，它的左侧有一个边框（参见 fiddle）。它通过绝对定位工作，并使用 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>

在 IE11 中 table-cell 的顶部和底部有一个带有填充的边框

Have a border with padding in top and bottom in table-cell in IE11

html

css

border

internet-explorer-11