使 <div> 的背景色填充封闭的 <td>
Posted
技术标签:
【中文标题】使 <div> 的背景色填充封闭的 <td>【英文标题】：Make the background-color of a <div> fill the enclosing <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 的转换程序，这就是我们正在谈论的大致内容。 （我也事先不知道使用了哪些字体。）
欺骗***.com/questions/3542090/…
【参考方案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/
【讨论】：
遗憾的是，文本不再沿基线对齐。以上是关于使 <div> 的背景色填充封闭的 <td>的主要内容，如果未能解决你的问题，请参考以下文章