Question

在我的网站上，我有必要为少数类型定义“vertical-align：baseline”。

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

<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。您将看到第一行中的单元格为空，其内容移动到底部以与更大的单元格基线对齐...

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

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

P.P.S。我接受我的问题可能通过引用外部网站引起负面反馈，但是我几天都在努力解决这个问题并且会带来这种痛苦。同时承诺在问题解决后删除链接。

编辑：P.P.P.S。

具有“vertical-align：baseline”的想法是由于当同一行同时具有“纯文本”和“”元素（如按钮或输入文本字段）时，必须垂直对齐表行的内容）。

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

Answer 1

在CSS中使用“line-height”。我有同样的问题试图让我的按钮中的文本垂直排列在按钮的中间。线高可以让你轻松推动它，因为你需要将它放在你想要的位置......希望这有助于：）

vertical-align：基线受Chrome中的rowspan影响

1 个答案: