如何忽略谷歌浏览器中右对齐表格行中的额外空白？
Posted
技术标签:
【中文标题】如何忽略谷歌浏览器中右对齐表格行中的额外空白？【英文标题】：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，而是设置额外的样式或其他东西？
【问题讨论】：
【参考方案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 的信息。以上是关于如何忽略谷歌浏览器中右对齐表格行中的额外空白？的主要内容，如果未能解决你的问题，请参考以下文章