如何忽略谷歌浏览器中右对齐表格行中的额外空白？答案

【问题标题】：How to ignore the extra white space in Google Chrome in a right aligned table row?如何忽略谷歌浏览器中右对齐表格行中的额外空白？
【发布时间】：2011-08-23 03:59:14
【问题描述】：

我有一个在服务器端生成的带有右对齐单元格的表格。单元格中的每一行都是可选的，因此它包含在服务器端的 if-then 语句中。

示例 html 显示 3 列，其中第一列在 Google Chrome 中出现错误。第 2 列和第 3 列是正确的，但很奇怪，因为 html 是相同的，除了换行符和空格。

当我们查看 Google Chrome 中的第一列时，您会注意到单元格中每一行的右边距并非 100% 对齐。

这个问题在 Firefox 或 IE 中不存在，仅在 Google Chrome 中存在。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <table border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #000000;">
            <tbody>
                <tr>
                    <td style="text-align: right;border: 1px solid #000000;">
                        <span>Not Ok in Google Chrome</span>
                        <br /><span id="C1">500.000,00 €</span>
                        <br /><span id="C2">166.666,67 €</span>
                        <br /><span id="C3">489.545,90 €</span>
                    </td>
                    <td style="text-align: right;border: 1px solid #000000;">
                        <span>Ok in Google Chrome</span><br />
                        <span id="D1">500.000,00 €</span><br />
                        <span id="D2">166.666,67 €</span><br />
                        <span id="D3">489.545,90 €</span>
                    </td>               
                    <td style="text-align: right;border: 1px solid #000000;">
                        <span>Ok in Google Chrome</span><br /><span id="D1">500.000,00 €</span><br /><span id="D2">166.666,67 €</span><br /><span id="D3">489.545,90 €</span>
                    </td>                       
                </tr>
            </tbody>
        </table>
    </body>
    </html>

不能以不同的方式生成 html。

我怎样才能在谷歌浏览器中完成这项工作，而不是通过更改 html，而是设置额外的样式或其他东西？

【问题讨论】：

标签： html css google-chrome html-table right-align

【解决方案1】：

只需更改 HTML。

这有多难？为什么不能改？

这在不改变 HTML 的情况下工作，但有点傻：

td span {
    display: block
}
td br {
    display: none
}

您的原始代码： http://jsbin.com/ipaca5
经过我的修复： http://jsbin.com/ipaca5/2

【讨论】：

奇数。似乎 BR 之前的回车被认为是重要的空白，因此被包含为文字空间。我认为这就是为什么它起作用的原因（因为块级元素之间的空白变得微不足道）但我一生都无法想到为什么会这样，我很有信心说我不认为有将是摆脱这种情况的一种简单的 CSS 方法。
我无法更好地表述它。一个 BR 被认为是一个重要的空白并因此被包含为文字空间，这对我来说听起来像是 Google Chrome 渲染引擎中的一个错误。没有？
@Linefeed：我同意，这是一个类似的错误报告：code.google.com/p/chromium/issues/detail?id=40634

【解决方案2】：

因为每个浏览器都以不同的方式处理 HTML（参见 quirks mode），所以您需要使用 CSS 来更改页面的样式。为了在所有（或尽可能多）上保持相同的外观，我建议从 Eric Meyer 的Reset Reloaded 之类的 CSS 重置开始。然后你可以从那里设置你想要的样式。

【讨论】：

即使重置了 CSS，问题仍然存在。指出我应该设置什么类型的样式将是我问题的一个很好的答案。
好的，在不知道您使用的 CSS 的情况下，您可能想要的是调整相关单元格的 text-align 属性。但是，您也会受到填充的影响，因此可能也需要进行调整。 W3 在此处的表格上有很好的文档：w3.org/TR/CSS2/tables.html
问题包含重现问题所需的一切，因此您无需了解更多有关 CSS 的信息。