IE旧边框显示在基于类的边框上

Question

我遇到问题，在IE9,10和11中会发生这种情况。

我基本上做的是让桌子上的所有td都有1px实心灰色的边框，而我在一些单元格周围做了一个7px的绿色边框。

在IE以外的浏览器中看起来是正确的，在IE中它可以做到这一点：

https://www.dropbox.com/s/q93mk7ox7jy9xpq/Screenshot%202014-07-24%2015.23.18.png

它显示灰色边框和绿色边框，顶部的灰色边框渗透。

这是Chrome的正确结果：

https://www.dropbox.com/s/p6u0o153917b3lm/Screenshot%202014-07-24%2015.25.18.png

这是我的CSS：

---

table.wirewatch2 td {
    background-color: #e7f9bf;
    border: 1px solid #9e9e9e;
}
table.wirewatch2 tr:first-child > td:not(:first-child):not(:last-child) {
    border-top: 7px solid green;
}
table.wirewatch2 tr:last-child > td:not(:first-child):not(:last-child) {
    border-bottom: 7px solid green;
}
table.wirewatch2 td:first-child {
    background-color: #b9d1f4;
}
table.wirewatch2 td:nth-child(2) {
    border-left: 7px solid green;
}
table.wirewatch2 td:nth-last-child(2) {
    border-right: 7px solid green;
}
table.wirewatch2 td:last-child {
    background-color: #d7b5b6;
}

据报道，所有这些都可以在w3schools和caniuse.com的IE9 +中使用。

现在我的项目经理通过一堆带有内联样式的COL标签来做这件事，并且它具有相同的行为（适用于除IE以外的任何其他内容），这让我相信它不是IE功能支持问题而是渲染引擎问题。

有人遇到过这种情况并知道如何解决这个问题吗？