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