면이 다른 경우 IE11 테두리 스타일 문제

Question

경계 스타일과 IE11이 파이어 폭스 및 크롬이 표시하는 방식과 다른 문제가 발생했습니다.

녹색 및 파랑 색 요소의 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의 상단과 하단에 경계선이있었습니다.

이는 "TD"에 이중 테두리 모양 결과

border: 3px solid lightgray; 

다음 클래스 변경 :

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

당신은 또한 TR에 테두리가

.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 및 경사 경계가 제거됩니다.