如何让 IE7 打印此正确地使用CSS隐藏的列?

发布于 2024-08-23 20:57:33 字数 790 浏览 15 评论 0原文

请注意,这似乎只是 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 中进行打印预览时,唯一显示的内容是“更长的描述”。换句话说,它隐藏了第一列,也隐藏了第二列。如何使其在所有浏览器中都有效?

Note that this only seems to be an issue in Internet Explorer versions 7 and lower. Here's a dumbed-down version of my 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>

Then, I'm including a "print" stylesheet, like this:

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

And that stylesheet includes the following:

.hidden_col {
    display: none;
}

Now on just about every other browser, even including IE8, this works fine. On the screen you see that first column, in print preview you don't. But for some reason, IE7 behaves very oddly. It displays things normally on the screen of course, but when you go to print preview in IE7, the only thing that shows is "Longer Description." So in other words, it hides that first column, and it also hides the second column. How do I make this work in all browsers?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

岛徒 2024-08-30 20:57:34

你不能隐藏表格的单个元素,表格内的元素只能使用以“table-”开头的CSS显示属性,至少它们应该如此。有关详细信息,请参阅

编辑:我认为您的问题只是使用您不应该使用的属性造成的故障。

You cannot hide a single element of a table, elements inside a table can only use the CSS display properties that start with 'table-', at least they're only supposed to. See this for more information.

Edit: I'd assume your problem is just a glitch from using properties you're not supposed to be using.

避讳 2024-08-30 20:57:34

试试这个:(未经测试)

td .hidden_col{
    display: none;
}

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

Try this: (untested)

td .hidden_col{
    display: none;
}

for some reason in Print mode there can be a continuation with CSS styles in print mode on some browser.

李不 2024-08-30 20:57:34

我最终所做的只是简单地指定单元格本身的宽度,而不再使用 。在我看来并不理想,所以我将暂时保留这个问题,以防任何人都能提出更好的解决方案,但它确实有效。这是我最终的 HTML:

<table>

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

</table>

What I ended up doing is simply specifying the widths on the cells themselves and not using the <colgroup> anymore at all. Not ideal in my mind, so I'll leave this question open for awhile in case anyone can come up with a better solution, but it did work. Here was my final HTML:

<table>

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

</table>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文