1

在我的网站上，我必须为几种类型定义“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。您会看到第一行中的单元格是空的，它们的内容移动到底部以与更大的单元格基线对齐...

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

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

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

编辑：PPP

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

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

4

1 回答 1

0

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

于 2012-12-01T05:52:44.057 回答