如何解决如何使用媒体打印 css 正确打印页面？ 详情页面详情页打印DetailsStyle.css详细信息.cshtml
详情页面
但是，当我尝试打印页面时，它会有些混乱：
详情页打印
我已经使用了一些媒体打印 css 来尝试解决一些问题并取得很大的成功，尽管我不确定您是否会考虑这种最佳做法：
DetailsStyle.css
.topLabel {
margin-top: 50px;
}
.borderline {
border-bottom: 4px solid #000000;
padding-bottom: 10px;
margin-bottom: 40px
}
.Box-shadow {
margin-top: 40px;
Box-shadow: 0.15rem 0.15rem 0.25rem #000000;
}
@media print {
.bigContainer {
margin-top: -100px !important;
}
.printButton {
margin-right: 600px !important;
margin-bottom: -30px !important;
}
.district {
margin-top: -25px !important;
}
.sign {
margin-bottom: 100px !important;
}
.localName {
margin-top: -5px !important;
}
.suppMethodDuplicate {
margin-right: 500px !important;
}
}
我使用了重要标签，因为这些更改在 Google Chrome 中不起作用，但它是每个人在工作中使用的主要浏览器，也是我的客户最有可能使用的浏览器。
但是，您可以看到页面中间的行仍然很混乱，我不知道如何处理它们。我试过将它们向左和向右移动，但似乎从来没有让它们非常接近原始页面。
我的问题是：
1.) 我怎样才能修复中间的那些行以使其在正常页面上的显示方式相同？
2.) 我的媒体打印 css 是否正常，或者这是不好的做法，如果是，我应该怎么做？
如果需要，这是完整的 cshtml 页面：
详细信息.cshtml
@model Roadway_History.Models.viewmodel
<!-- CUSTOM CSS -->
<link href="~/Styles/Statewides/Detailsstyle.css" type="text/css" rel="stylesheet">
<!-- GOOGLE ICONS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
@{
ViewBag.Title = "Details";
}
<div class="bigContainer">
<div class="container-fluid text-center topLabel">
<div class="borderline">
<h4 class="title"><strong>DETAIL RECORD - RP ROADWAY HISTORY FILE</strong></h4>
<div class="row">
<div class="col-md-1 printButton">
<input class="text-left" type="button" onclick="javascript:window.print()" value="Print" runat="server" />
</div>
<div class="col-md-11">
<p class="text-right">
<u>Current Date:</u>
<script>document.write(new Date().toLocaleDateString());</script>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9 text-left">
<h5><strong>COUNTY:</strong> <span class="Box-shadow px-3">@Html.displayFor(model => model.Statewide.COUNTY)</span></h5>
</div>
<div class="col-md-3 text-right district">
<h5><strong>district:</strong>@Html.displayFor(model => model.Statewide.district)</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<h5><strong>Route No:</strong><span class="Box-shadow px-4">@Html.displayFor(model => model.Statewide.RouteNo)</span></h5>
</div>
<div class="col-md-4">
<h5><strong>Sign System:</strong><span class="Box-shadow px-4 sign">@Html.displayFor(model => model.Statewide.SignSys)</span></h5>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-12 text-left">
<h5><strong>LocalName:</strong></h5>
</div>
</div>
<div class="row">
<div class="col-md-4 text-left">
<h5 class="Box-shadow px-3 localName">@Html.displayFor(model => model.Statewide.LocalName)</h5>
</div>
<div class="col-md-8"></div>
</div>
<div class="row suppMethodDuplicate">
<div class="col-md-2 text-right">
<h5><strong>Supp Des:</strong></h5>
</div>
<div class="col-md-2 text-left">
<h5>@Html.displayFor(model => model.Statewide.SuppDes)</h5>
</div>
<div class="col-md-2 text-right">
<h5><strong>Method:</strong></h5>
</div>
<div class="col-md-2 text-left">
<h5>@Html.displayFor(model => model.Statewide.Method)</h5>
</div>
<div class="col-md-1"></div>
<div class="col-md-2 text-left">
@Html.displayFor(model => model.Statewide.Duplicate_OK)
<label class="form-check-label" for="duplicateCheck"><strong>Duplicate OK</strong></label>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right">
<h5><strong>Date:</strong></h5>
</div>
<div class="col-md-2 text-left">
<h5>@Html.displayFor(model => model.Statewide.ReservedDate)</h5>
</div>
<div class="col-md-2 text-right">
<h5><strong>Original Location:</strong></h5>
</div>
<div class="col-md-2 text-left">
<h5>@Html.displayFor(model => model.Statewide.OriginalL)</h5>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-2 text-right">
<h5><strong>Original D:</strong></h5>
</div>
<div class="col-md-6 text-left">
<h6>@Html.displayFor(model => model.Statewide.OriginalD)</h6>
</div>
</div>
<div class="borderline text-left">
<h5 class="mb-0"><strong>DOCUMENTS</strong></h5>
</div>
<table class="table">
<tr>
<th>Doc Type</th>
<th>Order Date</th>
<th>Doc Location</th>
<th>File Contents</th>
<th>Comment</th>
</tr>
@foreach (var document in Model.Document)
{
<tr>
<td>
@Html.displayFor(model => document.Doc_Type)
</td>
<td>
@Html.displayFor(model => document.Order_Date)
</td>
<td>
@Html.displayFor(model => document.Doc_Location)
</td>
<td>
@Html.displayFor(model => document.File_Contents)
</td>
<td>
@Html.displayFor(model => document.Comment)
</td>
</tr>
}
</table>
<div class="borderline text-left">
<h5 class="mb-0"><strong>PROJECTS</strong></h5>
</div>
<h6 class="text-left">@Html.displayFor(model => model.Statewide.Projects)</h6>
<div class="borderline text-left">
<h5 class="mb-0"><strong>COMMENTS</strong></h5>
</div>
<p class="text-left">@Html.displayFor(model => model.Statewide.Comments)</p>
</div>
<p style="margin-top: 20px">
@Html.ActionLink("Back to List","Index")
</p>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
