html – 填充封闭的背景颜色

我有一个 HTML表格,其单元格包含带显示的div:inline-block,包含不同大小的文本.

我需要文本在基线上对齐,我需要div的背景颜色来填充单元格的高度.对于最大的字体,背景颜色确实填充单元格,但它不适用于较小的字体:

这可能吗?像div {height:100%}这样明显的解决方案似乎被不同的字体大小所打破.

这是迄今为止的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    table td {
        vertical-align: baseline;
        padding: 0;
    }

    td div {
        display: inline-block;
    }
  </style>
</head>
<body>
    <table>
        <tr>
            <td style="background-color:cyan">
                <div style="background-color:pink;">Pink</div>
                <div style="background-color:green;">Green</div>
            </td>
            <td style="background-color:cyan">
                <div style='font-size: 40pt; background-color:yellow;'>
                    Big yellow text
                </div>
            </td>
            </tr>
  </table>
</body>
</html>

它也在jsfiddle here上.

不完美,但我能得到的最接近:

http://jsfiddle.net/gfPkV/14/

相关文章
相关标签/搜索