6

我有一个在服务器端生成的带有右对齐单元格的表格。单元格中的每一行都是可选的，因此它包含在服务器端的 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 €&lt;/span>
                        <br /><span id="C2">166.666,67 €&lt;/span>
                        <br /><span id="C3">489.545,90 €&lt;/span>
                    </td>
                    <td style="text-align: right;border: 1px solid #000000;">
                        <span>Ok in Google Chrome</span><br />
                        <span id="D1">500.000,00 €&lt;/span><br />
                        <span id="D2">166.666,67 €&lt;/span><br />
                        <span id="D3">489.545,90 €&lt;/span>
                    </td>               
                    <td style="text-align: right;border: 1px solid #000000;">
                        <span>Ok in Google Chrome</span><br /><span id="D1">500.000,00 €&lt;/span><br /><span id="D2">166.666,67 €&lt;/span><br /><span id="D3">489.545,90 €&lt;/span>
                    </td>                       
                </tr>
            </tbody>
        </table>
    </body>
    </html>

以不同的方式生成 html 不是一种选择。

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

4

2 回答 2

3

只需更改 HTML。

它能有多难？为什么你不能改变它？

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

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

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

于 2011-05-11T09:55:38.643 回答
0

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

于 2011-05-11T09:52:08.810 回答