打印 CSS 无法正常工作

Question

MVC3 RAZOR VB.Net 应用程序。在我的观点之一中，我尝试使用 print.css 创建一个打印机友好的视图。我有以下视图代码：

@ModelType IEnumerable(Of xxxxxxxxxxxxx.sponsor)
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
@Code
ViewData("Title") = "Sponsors"
End Code
@Code


Using (Html.BeginForm())
    @<p> 
    Search For: @Html.TextBox("SearchString")
    <input type="submit" value="Filter" />

    </p>


End Using

End Code

<p>
@Html.ActionLink("Create Sponsor", "CreateSponsor")
</p>
<table>
<tr>
    <th>
        Exhibitor or Sponsor
    </th>
    <th>
        Sponsor Amount
    </th>
    <th>
        Contact Person
    </th>
   <th>
       Company/Organization
    </th>
   <th>
       Phone
    </th>
    <th>
       Email
    </th>
    <th>
      Paid
    </th>


    </tr>

    @For Each item In Model
    Dim currentitem = item
    @<tr>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.status)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.amount)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Contact_Person)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Company_Organization)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Phone)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Email)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Paid)
    </td>

    <td>
    @Html.ActionLink("Edit", "EditSponsor", New With {.id = currentitem.id}) |
    @Html.ActionLink("Details", "DetailsSponsor", New With {.id = currentitem.id}) |
    @Html.ActionLink("Delete", "DeleteSponsor", New With {.id = currentitem.id}) |
    @Html.ActionLink("Pay with Credit Card", "Credit_Card_Sponsor", New With {.id = currentitem.id})
   </td>
   </tr>

    Next
    </table>

    <div id="sidebar3">
    <p>


      @Html.ActionLink("Back to List", "Index")
      </p>
      </div>

使用默认布局视图。下面是 print.css 文件，

#header, #footer, #sidebar3, #Actions, #nav{
display: none;
}

当我在浏览器中右键单击并单击打印时，它根本看不到 css。侧边栏框、标题图像和菜单栏都仍然显示...有什么想法吗？？？

Answer 1

您是否添加了@media print

@media only print
{
#header, #footer, #sidebar3, #Actions, #nav{
display: none !important;
}

Answer 2

问题与您正在使用的选择器的优先级以及样式表的“级联”性质有关。

我猜您正在通过未指定 media 的链接使用不同的外部 css 文件进行“正常”显示？该样式表将覆盖您定义的打印样式，就好像您没有指定它适用于所有介质的介质类型一样。

解决问题的一种方法是在打印规则上使用 !important - 使打印规则具有更高的优先级。

或者，看看 this - 它给出了很好的解释规则优先级，从中您应该能够找出为什么您的打印规则没有更高的优先级