0

解决方案

<!DOCTYPE html>应该出现在页面的顶部,以向浏览器指示页面应该以标准模式呈现。

Internet Explorer 8+ 包含一个兼容性视图设置,该设置将呈现在 IE 7 中显示的页面。默认情况下,所有 Intranet 分区站点都设置为以兼容模式呈现,这会产生下面概述的问题。要强制页面从不以兼容模式呈现,可以将此元标记添加到<head>页面的部分。

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7;" />

就我而言,我使用的是 ASP.NET,因此为了方便起见,我将上述内容添加为自定义标题,以使我网站中的所有页面都以标准模式呈现。

原帖

首先,我在一个专门使用 IE 8 的环境中工作,所以我不需要在所有浏览器上都兼容的解决方案——只需要 IE。

我有一个页面显示宽度= 100%的表格,除了最后一列中的单元格之外的每个单元格都设置为特定宽度(在本例中为 200 像素)。在 IE 中呈现时,它按预期工作。也就是说,我得到了 200px 宽的 3x 列,第 4 列占据了剩余的空间(取决于用户的屏幕分辨率/窗口大小)。

但是,如果我在表格中添加一个额外的行,并使这个底行跨越所有列,Internet Explorer 8 和 9 将完全忽略指定的列宽,具体取决于该底行中文本的宽度。当我将 text-align:right 合并到第一行的列中时,这种行为更加不寻常。当我这样做时,IE 会根据列的宽度对齐文本同时在列之间插入不可用的空间。最好用屏幕截图来说明这一点。

来自 img685.imageshack.us/img685/7117/iecolumnwidths.png

这表明表格在 Opera 12 中正确呈现,但在 IE 8 或 9 中不正确。这是我用来说明问题的 HTML:

<html>
<head>
  <style>
    td{
       background-color:#AAAAAA;
    }
    .s1{
       text-align:right;
       width:200px;
    }
  </style>
</head>
<body>

<table width="100%">
  <tr>
    <td class="s1">Col 1 a a a a a a a a a</td>
    <td class="s1">Col 2 a a a a a a a a a</td>
    <td class="s1">Col 3 a a a a a a a a a</td>
    <td>Col 4</td>
  </tr>
  <tr>
    <td class="s1">Col 1 a a a a a a v vv vv v v v</td>
    <td class="s1">Col 2 a a a a a a v vv vv v v v</td>
    <td class="s1">Col 3 a a a a a a v vv vv v v v</td>
    <td>Col 4</td>
  </tr>
  <tr>
    <td colspan="4">This text causes the table columns to expand xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx 

xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa 

aaaaaaaa aaaaa</td>
  </tr>
</table>

</body>
</html>

所以我的问题是,我需要改变什么才能让它在 IE 中呈现与在 Opera 中相同的效果?我希望表格动态调整大小,同时将我指定的列固定为特定宽度。

4

2 回答 2

2

您没有指定使 IE 进入怪癖模式的文档类型。所以把它放在你的页面顶部:

<!DOCTYPE html>
于 2012-07-26T10:41:15.617 回答
0

不要使用 colspan,这可能会导致问题。

于 2012-07-26T10:48:59.240 回答