Chrome CSS 边界问题

Question

我发现 Chrome 关于以下 CSS...

的一些非常奇怪的行为

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)

问题是 table 的中心单元格有一个底部边框，尽管事实上我还没有指定应该有一个。我已经在 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;
}

Answer 2

事实证明，我的 post 实际上是 this question 的副本，因此，如果您想关闭它，请随意。

Chrome CSS 边界问题

Chrome CSS border issue

css

google-chrome

cross-browser