Печать CSS не работает правильно

Question

MVC3 RAZOR VB.Net App.В одном из моих представлений я пытаюсь создать представление для печати с использованием 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

Проблема будет связана с приоритетом используемых селекторов и «каскадным» характером таблиц стилей.

Я предполагаю, что вы используете другой внешний CSS-файл для "нормального" отображения по ссылке без указания media? Эта таблица стилей будет переопределять стили печати, которые вы определили, как если бы вы не указали тип носителя, который применяется ко всем носителям.

Одним из способов решения проблемы является использование !important в ваших правилах печати - придание правилам печати более высокого приоритета.

В качестве альтернативы взгляните на this - это дает довольно хорошее объяснение приоритета правил, и из этого вы сможете выяснить, почему ваши правила печати не имеют более высокого приоритета