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

Posted 2023-03-06

技术标签:

【中文标题】HTML/CSS 表格右对齐文本在 IE 中不起作用【英文标题】：HTML/CSS table right align text not working in IE 【发布时间】：2012-07-30 13:39:00 【问题描述】：

再一次，Internet Explorer 对我来说并不容易。我有一个表格，同一行有两个单元格。我想显示一些与左侧对齐的文本（第一个单元格），另一个与右侧对齐（第二个单元格）。这在 Chrome 和 Firefox 中完全有效，但在 IE 中所有文本都显示为左对齐：

<table >
<tr>
    <td align="left" >Text 1</td>
    <td align="right" >Text 2</td>
</tr>

经过一番研究，我想是否应该将其放在 CSS 上，所以我将其更改为：

html：

<table class="anchors" >
<tr>
    <td class="left" >Text 1</td>
    <td class="right" >Text 2</td>
</tr>

CSS：

table.anchors td.left

    text-align: left;


table.anchors td.right

      text-align: right;

它仍然无法在 IE 中运行（至少是第 9 版）。有人对此有提示吗？我应该使用其他东西（例如 div）吗？

【问题讨论】：

你介意发fiddle吗？在 IE9 中似乎工作正常，即使是初始设计。为您的表格添加边框以获得更多关于文本对齐方式的视觉效果。解决这类问题的最快方法是使用 IE 开发工具 (F12)。然后您可以对 css 进行更改并随时查看实时结果。你的页面中有doctype吗？感谢大家快速友好的回答。问题很明显：正如你们中许多人指出的那样，td 的宽度。我每个都有 330 像素，不知何故改变了它并没有注意到它。对不起，打扰你。虽然，我已经更改了一些细节以拥有更标准化的 HTML，但我会检查 HTML 的有效性，因为它的一部分是由我正在使用的软件 (SSI Web) 生成的。 【参考方案1】：

http://jsfiddle.net/6jvnQ/

你能改变表格的宽度，使它和两个单元格一样宽吗？我怀疑你会因为奇怪的宽度而得到不同的结果。

【讨论】：

正是如此，乔纳斯。有关详细信息，请参阅我对自己帖子的回复。谢谢！【参考方案2】：

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

但是，IE 8 和 IE 9 在“标准模式”下的行为与其他浏览器一样。否则，在Quirks Mode 中，任何事情都可能发生，并且您不能将其称为错误，因为该文档是不合格的。所以添加一个适当的 doctype 声明。

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

【讨论】：

你是对的，尤卡。看看我上面原始帖子的cmets。一路感谢指正！【参考方案3】：

使用这个：

padding-left:22% 或 22px 或任意长度

【讨论】：