使 <div> 的背景色填充封闭的 <td>答案

【问题标题】：Make the background-color of a <div> fill the enclosing <td>使 <div> 的背景色填充封闭的 <td>
【发布时间】：2012-01-10 19:19:03
【问题描述】：

我有一个 HTML 表格，其单元格包含 divs 和 display:inline-block，包含不同大小的文本。

我需要文本在基线上对齐，并且我需要divs 的背景颜色来填充单元格的高度。对于最大的字体，背景色会填充单元格，但对于较小的字体则不会：

这可能吗？像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.

【问题讨论】：

如果您已经在使用表格，为什么不直接使用表格单元格？
@Mathletics：这很复杂。 :-) 我需要 divs 的原因在这个简化的例子中并不明显。
字体大小是已知值吗？你能做数学计算并计算出较小字体块上的填充吗？
@Mathletics：不是这样。 HTML 正在生成 - 想象一个 PDF 到 HTML 的转换程序，这就是我们正在谈论的大致内容。（我也事先不知道使用了哪些字体。）
欺骗stackoverflow.com/questions/3542090/…

标签： html css html-table alignment

【解决方案1】：

不完美，但我能得到的最接近：

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

【讨论】：

效果很好，但在极少数情况下，即使用户放大了一点，它也会再次关闭。
@ptriek：遗憾的是文本不再沿基线对齐。
是否可以选择为填充颜色添加额外的 div？查看我更新的链接 - 这保留了基线对齐（尽管仍然有点混乱）
@ptriek：在 Chrome 中很可爱，但在 Firefox 和 IE 中就坏了。 position:relative 的行为对于 <td> 是未定义的，Firefox 会忽略它。我不确定 IE 认为它在做什么，但它肯定是不对的。 :-)

【解决方案2】：

我读过一次，td 没有报告它的高度。所以任何height: 100% 或height:auto 等都不起作用。

所以我的解决方案在这里：http://jsfiddle.net/UGTYP/

它使用 javascript 将“粉红色”文本的高度更改为“黄色”div 的高度。

【讨论】：

遗憾的是，文本不再沿基线对齐。

【解决方案3】：

快速而肮脏的修复：

CSS

div {
    line-height:60px;
    height:60px;
    vertical-align:middle;
}

演示：http://jsfiddle.net/2YbBg/

【讨论】：

遗憾的是，文本不再沿基线对齐。