css - IE11 边框样式问题，当双方是不同的颜色

Question

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

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

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

在您的“td:nth-child”类中，每个 td 的顶部和底部都有边框。

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

你在 tr 上也有一个边框:

border: 3px solid lightgray;

这会在“td”更改以下类时产生双边框外观:

.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 中进行了测试，斜 Angular 边框被移除了。