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

Question

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

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

在 chrome 和 firefox 中看不到斜切。我似乎找不到任何可以在 IE11 中消除它的东西。有什么想法吗？

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

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

IE11 border style issue when sides are different colors

css

border

internet-explorer-11