HTML/CSS 表格右对齐文本在 IE 中不起作用

Question

再次强调，Internet Explorer 对我来说并不容易。我有一个表格，同一行有两个单元格。我想显示一些文本向左对齐(第一个单元格)，另一个文本向右对齐(第二个单元格)。这在 Chrome 和 Firefox 中完全有效，但在 IE 中所有文本显示为左对齐:

<table width="660px">
<tr>
    <td align="left" width="160px">Text 1</td>
    <td align="right" width="160px">Text 2</td>
</tr>

经过一些研究，我想知道是否应该将它放在 CSS 上，所以我将其更改为:

HTML:

<table class="anchors" width="660px">
<tr>
    <td class="left" width="160px">Text 1</td>
    <td class="right" width="160px">Text 2</td>
</tr>

CSS:

table.anchors td.left
{
    text-align: left;
}

table.anchors td.right
{
      text-align: right;
}

它在 IE 中仍然不起作用(至少是版本 9)。有人对此有暗示吗？我应该使用其他东西(例如 div)吗？

Answer 1

代码在语法上是错误的(width 属性采用数字或百分比值，而不是 px 单位)，尽管这被浏览器原谅了。更严重的是，您正在设置相互冲突的要求:表格应为 660 像素宽但由两个 160 像素宽的单元格组成。浏览器行为不一致也就不足为奇了。

但是，IE 8 和 IE 9 在“标准模式”下的行为与其他浏览器一样。否则，在 Quirks Mode , 任何事情都可能发生，你不能称之为错误，因为文档是不合格的。所以添加一个足够的文档类型声明。

此外，最好避免需求冲突。如果您需要以像素为单位设置表格的总宽度，那就这样吧。然后要么设置列宽，使它们相加，要么更简单地设置，例如将宽度调整为 50%(对于应该平衡的两列表)。