垂直对齐：基线受 Chrome 中的行跨度影响答案

【问题标题】：vertical-align:baseline is affected by rowspan in Chrome垂直对齐：基线受 Chrome 中的行跨度影响
【发布时间】：2012-11-19 07:07:25
【问题描述】：

在我的网站上，我有必要为几种类型定义“vertical-align:baseline”。

这种风格在 IE 中工作得非常好，但在 Chrome 中有一个问题，我无法在最简单的示例中复制。下面的代码完全可以正常工作，但我的网站呈现的相同代码的“姓氏”、“LLLLLL”单元格的内容与“大单元格”的基线对齐，但与自己的基线不对齐细胞。事实上，它与所有“跨越”行的基线对齐...

<html>
<head><title>Test table vertical alignment</title><body>
<style type="text/css">
    table.t_data
    {
        border-collapse:collapse;
        margin: 0 auto 0 auto;
    }

    table.t_data tbody th, table.t_data tbody td
    {
        border: #333 1px solid;
        vertical-align: baseline;
    }
</style>
<table class="t_data">
    <tbody>
        <tr>
            <th>Last Name</th>
            <td>LLLLLLLL</td>
            <td rowspan="3">Big cell</td>
        </tr>
        <tr>
            <th>First Name</th>
            <td>FFFFFF</td>
        </tr>
        <tr>
            <th>Team</th>
            <td>My Cool Team</td>
        </tr>

    </tbody>
</table>

</body>
</html>

我认为这是一个“流行”（众所周知的）错误，但找不到任何关于相同问题的信息。

我的代码中似乎还有其他东西会影响垂直对齐，但我不知道哪里出了问题。我尝试禁用不同的样式选项，但没有发现任何影响垂直对齐的选项。

问题 1：这种对齐方式和按行跨度分组的表格单元格是否存在已知问题？

问题2：如果没有通用解决方案，请查看页面上的代码：http://vfm-elita.com/player/4990。你会看到第一行的单元格是空的，它们的内容移动到底部以与更大的单元格基线对齐......

我欢迎任何帮助或想法。非常感谢您！

附：我发现了类似的问题（http://stackoverflow.com/questions/10272553/vertical-align-baseline-doesnt-work-in-chrome），但建议的解决方案对我没有帮助。

附言我接受我的问题可能会通过引用外部站点而导致负面反馈，但我会在几天内为这个问题而苦苦挣扎，并且会承受这种痛苦。还承诺在问题解决后删除链接。

编辑：P.P.P.S.

产生“vertical-align:baseline”的想法是因为当同一行同时具有“纯文本”和“”元素（如按钮或输入文本字段）时，需要垂直对齐表格行的内容)。

但是，最近我发现“垂直对齐”样式不能对齐元素内容。它对齐元素本身，所以在我的情况下，我应该将它应用于单元格内容，而不是对单元格（td，th）应用“vertical-align:baseline”。但这也不能解决问题......

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

改为在您的 CSS 中使用“line-height”。我在尝试让按钮中的文本垂直排列在按钮中间时遇到了同样的问题。行高将允许您根据需要将其轻推至所需位置...希望这会有所帮助:)

【讨论】：