Question

溶液

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

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

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

在我的情况下，我使用的是为了方便起见，我将上面的内容添加为自定义标题，以使我网站中的所有页面都以标准模式呈现。

原帖

首先，我在一个独家使用IE 8的环境中工作，所以我不需要一个兼容所有浏览器的解决方案 - 只是IE。

我有一个页面显示宽度= 100％的表格，除了最后一列中的那些单元格设置为特定宽度（在本例中为200px）。在IE中呈现时，它按预期工作。也就是说，我获得了3x列宽200px的列，第4列占用了剩下的任何空间（取决于用户的屏幕分辨率/窗口大小）。

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

from 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中相同的效果？我希望在将指定的列固定到某个宽度时动态调整表的大小。

Answer 1

你没有指定一个让IE进入怪癖模式的doctype。所以把它放在页面的顶部：

<!DOCTYPE html>

Answer 2

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

如何让Internet Explorer正确呈现这些列

2 个答案: