IE11ボーダースタイルの問題sideが異なる色の場合

Question

ボーダースタイルの問題が発生しました。IE11はFirefoxとChromeの表示方法とは異なります。

IE11では、緑色と青色の要素上に、ボトムボーダーと右ボーダーの色が異なる場合に、右下隅にベベルが表示されます。

クロムとファイアフォックスでは面取りが見えません。私は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>

クロムのスクリーンショット：

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とベベルボーダーが削除されます。