为什么对齐属性仅从 td 传播到 IE 上的包含表？答案

【问题标题】：Why is an align attribute propagating from td to a contained table on IE only?为什么对齐属性仅从 td 传播到 IE 上的包含表？
【发布时间】：2011-05-19 10:46:18
【问题描述】：

这个html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>TD align test</title></head>
<body>
<table width="100%">
  <tr><td>aligned left</td><td align="right">aligned right</td></tr>
  <tr><td colspan="2" align="center">
    <table width="100%" cellspacing="0" cellpadding="0">
      <tr><td>should be aligned left</td></tr>
    </table>
  </td></tr>
</table>
</body>
</html>

在 IE（6 和 8）和 Opera 中将“应该左对齐”对齐，但在 Firefox（3.6 和 4 beta）和 Chromium 中向左对齐。前者似乎将对齐方式从 td 传播到包含的表。

谁能解释这个区别？哪种行为更符合标准？

（您可以在http://ysth.info/tdalign.html尝试。）

【问题讨论】：

这只是一个案例研究吗？因为当内容为 100% 宽时，您不必居中对齐。但这个问题确实很有趣。
@Gaby：是的，这只是一个演示效果的简单案例。我想知道这里起作用的力量，以便有可能在大量的表格快乐代码中找到所有类似的问题，而不仅仅是显而易见的问题。

标签： html internet-explorer html-table alignment

【解决方案1】：

您可以查看http://www.docsteve.com/DocSteve/TechNotes/IE6_cascade_test.html 了解它可能发生的原因。

事实是，它是另一个 IE glitch（与其他浏览器不兼容）。我唯一能建议的就是通过明确指定您想要的对齐方式来覆盖它..

如果您使用类和 text-align:center，您会注意到所有浏览器的行为都与 IE 对 align 属性的行为相同，因此不确定哪个是正确/错误。

【讨论】：

嗯。 table { text-align:left } 会是通用修复吗？（我没有 th 元素）
@ysth，是的，但结合td{text-align:inherit;}，它应该涵盖所有情况。但是您需要使用class 或style 属性来覆盖它，因为align="left" 将不起作用（它会被这些规则覆盖）
我没有得到最后一部分；你能澄清一下吗，也许举个例子？
如果您不使td 继承其父元素（table）的text-align，它将使用其默认值，这将导致您在原始帖子中提到的效果。您也可以直接使用 td{text-align:left} 来定位 td 元素并完全跳过表格。

【解决方案2】：

align 属性是deprecated，所以即使我知道如何管理它，我也不愿意尝试协商它，因为较新的浏览器可能越来越难以一致地显示它。

对于您的情况，您可能只想定义类 .right 和 .left（以覆盖级联 .right）并将它们附加到您认为合适的行、表或单元格上。

【讨论】：

弃用应该不是问题； deprecated 只是意味着仅支持未来 html 版本的用户代理可能不再支持它，它确实不意味着声称支持 4.01 的用户代理全权委托破坏已弃用的东西。也就是说，html5 草案确实删除了 align，而且它已被弃用的事实表明有充分的理由不使用它。