html - 如何阻止表格单元格元素的边框与单元格的填充区域重叠？

Question

具有边框的表格单元格元素不尊重包含它们的单元格的垂直高度。一个孩子的边界可能会与其包含的单元格的填充（甚至边界）重叠。如何防止这种情况使单元格完全包含子元素，包括其边框？

JSFiddle 示例

<table>
    <tr>
        <td>
            <span>foo bar</span>
        </td>
    </tr>
</table>

tr {
    background: red;
}
td {
    padding: 5px;
    background: white content-box;
}
span {
    border: 10px solid blue;
}

Answer 1

坚持display: inline-block;跨度。然后边框将成为块边框而不是行框边框，并被迫停留在元素的边界框内。

类似的东西。:)