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 像素宽的单元格组成。浏览器行为不一致并不奇怪。

\n\n

但是，IE 8 和 IE 9 在 \xe2\x80\x9cStandards Mode\xe2\x80\x9d 下的行为与其他浏览器类似。否则，在Quirks 模式下，任何事情都可能发生，你不能称之为 bug，因为文档是不合格的。因此添加适当的文档类型声明。

\n\n

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

\n