当边是不同颜色时IE11边框样式问题

Question

我遇到了边框样式的问题，IE11与firefox和chrome显示它的方式不同。

在IE11中，在绿色和蓝色元素上，当底部边框和右边边框颜色不同时，右下角会出现斜角。

在chrome和firefox中看不到那个斜角。我似乎无法找到任何可以消除IE11中的内容。有什么想法吗？

示例代码： https://jsfiddle.net/s4pecmv5/3/

body{
background-color:white;
}
.container{
  display:table;
  width:auto;
  border-radius:3px;
}
.container,table,table tr{
border: 3px solid lightgray;
}
table{
border-collapse:collapse;
}
table,table tr{
padding:0px;
margin:0px;
}
table td {
border:none;
padding:15px;
text-align:center;
}
table thead {
background-color:lightgray;
}
table thead td {
font-weight:bold;
color:darkgray;
text-transform:uppercase;
}

table td:nth-child(1){
  text-align:left;
}

table tbody td:nth-child(2),
table tbody td:nth-child(3){
color:white;
font-weight:bold;
}
table tbody td:nth-child(2){
border-top:3px solid green;
border-bottom:3px solid green;
border-right:3px solid white;
background-color:lightgreen;
box-shadow: inset 0px 0px 0px 10px green;
}

table tbody td:nth-child(3){
border-top:3px solid blue;
border-bottom:3px solid blue;
background-color:lightblue;
box-shadow: inset 0px 0px 0px 10px blue;
}

table tbody tr:first-child td {
border-top:3px solid lightgray;
}

table tbody tr:last-child td {
border-bottom:3px solid lightgray;
}

<div class="container">
<table>
<thead>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
</thead>
<tbody>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
<tr>
<td>afdas sdf sadf</td>
<td>dfhfd</td>
<td>gjklg</td>
</tr>
</tbody>
</table>
</div>

Chrome屏幕截图：

IE11截图：

Answer 1

在你的＆＃34; td：nth-​​child＆＃34;你在每个td的顶部和底部都有边框的类。

border-top:3px solid green;
border-bottom:3px solid green;

你还在tr：

上有一个边框

border: 3px solid lightgray;

这会导致＆＃34; td＆＃34;更改以下类：

.container, table{
   border: 3px solid lightgray;
}

table tbody td:nth-child(2){
   border-right:3px solid white;
   background-color:lightgreen;
   box-shadow: inset 0px 0px 0px 10px green;
}

table tbody td:nth-child(3){
   background-color:lightblue;
   box-shadow: inset 0px 0px 0px 10px blue;
}

我在Chrome IE11和Firefox中测试过，并删除了斜角边框。