使用css打印页面时出错(error when printing a page with css)

使用css打印页面时出错(error when printing a page with css)

当点击菜单中的元素时，用户有机会从网站打印当前页面：

<li> <a href="#" onClick="window.print()"> <i class="icon-print"></i> Print Page </a> </li>

页面有一个表格，每行都有一个按钮（显然有一个内部链接可以重定向到另一个页面）。

问题是，在预览页面时，页面上的链接显示如下：

菜单（javascript）也会显示...

我该怎么做才能解决这个问题？

这是我的print.css ：

.header { display: none; } .page-sidebar { display: none; } .color-panel { display: none; } .hidden-print { display: none; } .footer { display: none; } .no-page-break { page-break-after: avoid; } .page-container { margin: 0px; padding: 0px; } .page-content { min-height: auto !important; } .breadcrumb { display: none; }

The user has the chance to print current page from the website when clicking on an element from a menu:

<li> <a href="#" onClick="window.print()"> <i class="icon-print"></i> Print Page </a> </li>

The page has a table and in each row there is a button (obviosly with an inside link to redirect to another page).

The problem is that when previewing the page, those links on the page appears explicitly like this:

also the menu (javascript) is also displayed...

What can I do to fix this?

This is my print.css:

.header { display: none; } .page-sidebar { display: none; } .color-panel { display: none; } .hidden-print { display: none; } .footer { display: none; } .no-page-break { page-break-after: avoid; } .page-container { margin: 0px; padding: 0px; } .page-content { min-height: auto !important; } .breadcrumb { display: none; }

最满意答案

我一直在研究并发现，当打印在列表中时我想要隐藏的下拉菜单，那么我应该使用这个：

.dropdown-menu li { display: none; }

并隐藏链接：

a[href]:after { content: none !important; }

所以现在我说对了:)

I've been researching and found out that as the dropdown menu that i want to hide when printing is in a list, then i should use this:

.dropdown-menu li { display: none; }

and for hidding links:

a[href]:after { content: none !important; }

so now i got it right :)