html - 如何让 IE7 正确打印被 CSS 隐藏的列？请注意，这似乎只是 Internet Explorer 7 及更低版本中的问题。这是我的 HTML 的简化版本： <table> <colgroup> <col width="20" class="hidden_col" /> <col width="50" /> <col /> </colgroup> <tr&

Question

请注意，这似乎只是 Internet Explorer 7 及更低版本中的问题。这是我的 HTML 的简化版本：

<table>

<colgroup>
<col width="20" class="hidden_col" />
<col width="50" />
<col />
</colgroup>

<tr>
<td class="hidden_col"><input type="checkbox" /></td>
<td>Title</td>
<td>Longer Description</td>
</tr>

</table>

然后，我包含一个“打印”样式表，如下所示：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

该样式表包括以下内容：

.hidden_col {
    display: none;
}

现在在几乎所有其他浏览器上，甚至包括 IE8，都可以正常工作。在屏幕上您会看到第一列，而在打印预览中您看不到。但出于某种原因，IE7 的行为非常奇怪。它当然在屏幕上正常显示，但是当您在 IE7 中进行打印预览时，唯一显示的是“Longer Description”。所以换句话说，它隐藏了第一列，也隐藏了第二列。我如何使它在所有浏览器中工作？

Answer 1

您不能隐藏表格的单个元素，表格内的元素只能使用以'table-'开头的CSS显示属性，至少它们应该这样做。有关更多信息，请参阅此。

编辑：我认为你的问题只是使用你不应该使用的属性的一个小故障。

Answer 2

试试这个：（未经测试）

td .hidden_col{
    display: none;
}

出于某种原因，在打印模式下，某些浏览器的打印模式下可能会延续 CSS 样式。

Answer 3

我最终做的只是简单地指定单元格本身的宽度，而不再使用<colgroup>了。在我看来并不理想，所以我会暂时搁置这个问题，以防有人能提出更好的解决方案，但它确实奏效了。这是我的最终 HTML：

<table>

<tr>
<td width="20" class="hidden_col"><input type="checkbox" /></td>
<td width="50">Title</td>
<td>Longer Description</td>
</tr>

</table>