css - Chrome CSS 边框问题

Question

关于以下 CSS，我发现 Chrome 有一些非常奇怪的行为...

CSS:

table.addressBody {
    width: 100%;
    min-width: 100%;
}
table.addressBody tr td {
    padding:    4px;
    width:      40%;
    min-width:  40%;
    max-width:  40%;
    border:     none;
    vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
    background-color: White;
    border: 2px solid #aaa;
}
table.addressBody tr td.centre {
    width:      20%;
    min-width:  20%;
    max-width:  20%;
    text-align: center;
}

HTML:

<div class="fitWidth centre">
    <strong>Mr Smith</strong><br />
    29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
    <tr>
        <td class="left">
            <select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
        </td>
        <td class="centre" style="border: none;">&nbsp;</td>
        <td class="right">
            <select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
        </td>
    </tr>
    <tr>
        <td class="leftShadow" colspan="2">
            <img src="../img/other/bottomShadowLt.png" alt="Shadow" />
        </td>
        <td class="rightShadow">
            <img src="../img/other/bottomShadowRt.png" alt="Shadow" />
        </td>
    </tr>
</table>

( Fiddle )

问题是表格的中心单元格有一个底部边框，尽管我实际上并没有指定应该有一个。我在 IE 和 FF 中尝试了相同的代码，都产生了所需的结果(两个带边框的外部单元格和没有边框的内部单元格)。

我也尝试为所有单元格上的每个边框依次编码 CSS，但是一旦我编码 #left 单元格 bottom-border 中心单元格也与底部接壤。另外，关于 this question 的通知代码中没有边框折叠(除非它是 Fiddle 本身的一部分)。

谁能发现我遗漏的任何明显问题或知道有解决方法的 Chrome 错误？

-- 编辑 --

Answer 1

但是你确实指定了它有一个底部边框:

table.addressBody tr td.centre {
    width:      20%;
    min-width:  20%;
    max-width:  20%;
    border-bottom: 2px solid #aaa; <---
    text-align: center;
}