第一：它是商业软件，我不能分享它的链接，所以你可以看到发生了什么。啊。让一切变得更难。
我为打印目的编写了一段 css。这是我的步骤：
- 在应用程序中加载页面
- 从开发人员工具中复制 HTML
- 将 html 粘贴到 jsfiddle 中（因此，所有类/结构都正确存在）
- 在 jsfiddle 中编写 css——东西看起来像我想要的样子
- 将 jsfiddle 中的 css 复制到我的inquiryPrint.css 文件（加载打印的文件）
- 有些css有效，有些无效
我考虑的事情：
- 覆盖问题；inquiryPrint.css 是最后加载的文件，它应该最后应用它的覆盖
打印 css 文件不仅仅在打印的媒体类型上调用......事实上，它是：
printWindow.document.write('<link rel="stylesheet" href="../css/InquiryPrint.css" type="text/css" />');我认为这是最重要的：该站点正在从inquiryPrint.css 文件中获取一些有效的CSS 选择器，但不是全部；例如，它看到 .row 并应用它的 CSS，但看不到 .admItem 并应用它的 CSS。这是在 jsfiddle 中正常工作的东西——即 .admItem 在 jsfiddle 中工作，但不是我的应用程序。
我尝试过的事情：
- 关闭/重新打开
- chrome 硬刷新 (cmd-shift-R)
- 它是共享代码；我将我的更改推送到我们的开发环境，将它们拉到同事的页面上，并验证它也不能在他的计算机上运行。
更新
- 这不是覆盖问题。我们甚至减少/删除了所有其他 css 文件，问题仍然存在。
- 这不是复杂选择器的特异性问题。几乎每个选择器都是单层/级别的（参见示例）。
- 这不是浏览器问题。它在 Chrome 或 Firefox 中不起作用（当然，这两个页面的呈现方式略有不同）。
- 我最初是从 jsfiddle 剪切/粘贴的，所以我认为这可能是剪切/粘贴问题。这不是——我们是手工编写的课程，没有修复。
- 这不是拼写问题，我们已经通过将 '.admItem' 替换为 '.georgeItem' 并将其剪切/粘贴到正确的位置进行了测试，但没有修复它。
- 同样，它看到的是文件中的 OTHER 内容，而不是 THIS 内容。
- 我们将整个 css 文件剥离为空，只留下一个类，它仍然没有拾取它。
- 我将嵌入的 CSS 放入 HTML 文件的头部，对于这一类，它也没有拾取它，但它正在拾取我们放在那里的其他值（例如正文文本转换：大写）。
- 我们可以单击开发人员工具并查看正确的 css 文件，以及正确的当前更改，因此它不应该是指针/语法问题——它看到文件在那里，并从中选择一些值，而不是其他值。
几张截图：
Chrome 开发者工具
嵌入式 CSS
这是完整的css文件。.georgeItem { 文本转换：小写！重要；}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.heading {
font-weight: 700;
padding: 10px 0px;
}
h1 {
font-weight: 700;
padding: 10px 0px;
text-transform: uppercase;
font-size: 15px;
font-size: 1.5rem;
margin: 0 0 5px 0;
}
h2 {
font-weight: 700;
padding: 10px 0px;
font-size: 14px;
font-size: 1.4rem;
}
h3 {
font-weight: 700;
padding: 10px 0px;
font-size: 13px;
font-size: 1.3rem;
}
h4 {
font-weight: 700;
padding: 10px 0px;
font-size: 12px;
font-size: 1.2rem;
}
h5 {
font-weight: 700;
padding: 10px 0px;
font-size: 11px;
font-size: 1.1rem;
color: #4c7a87;
}
h6 {
font-weight: 700;
padding: 10px 0px;
font-size: 10px;
font-size: 1rem;
color: #66909c;
}
p {
font-size: 10px;
font-size: 1rem;
padding: 0 0 5px 0;
color: #515151;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}
pre em {
font-style: italic;
color: #686667;
}
.inquiryPrint {
font-family: 'Trebuchet MS',Helvetica,sans-serif;
font-size: 10px;
font-size: 1rem;
}
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
/* Black prints faster: h5bp.com/s */
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
/* Don't show links for images, or javascript/internal links */
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
table {
border-collapse: collapse;
}
thead {
display: table-header-group;
}
/* h5bp.com/t */
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
size: landscape;/*does not work in some browsers like chrome */
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.inquiryPrint table {
width: 100%;
background-color: #ffffff;
}
.inquiryPrint tr,
.inquiryPrint thead tr,
.inquiryPrint tbody tr,
tr,
th,
td {
page-break-inside: avoid;
}
.inquiryPrint tr th,
.inquiryPrint thead tr th {
border-bottom: 2px solid #c0c0c0;
padding: 5px;
}
.inquiryPrint tr,
.inquiryPrint tbody tr {
border-bottom: 1px dashed #c0c0c0;
vertical-align: top;
}
.inquiryPrint tr:last-child,
.inquiryPrint tbody tr:last-child {
border-bottom: none;
}
.inquiryPrint tr td {
padding: 5px 10px 10px 2px;
text-align: center;
}
.inquiryPrint tr td,
.inquiryPrint tbody tr td {
text-align: center;
}
.inquiryPrint tr td.right,
.inquiryPrint tr th.right,
.inquiryPrint tbody tr td.right,
.inquiryPrint thead tr th.right {
text-align: right;
}
.inquiryPrint tr td.left,
.inquiryPrint tr th.left,
.inquiryPrint tbody tr td.left,
.inquiryPrint thead tr th.left {
text-align: left;
}
/*.inquiryPrint tr td.totalRow,
.inquiryPrint tbody tr td.totalRow {
text-align: right;
font-weight: 700;
font-size: 10px;
font-size: 1rem;
}*/
/* supports 15 character value with padding */
.inquiryPrint .wide15 {
width: 100px;
}
/* supports 30 character value with padding */
.inquiryPrint .wide30 {
width: 200px;
}
/* trying to insert code conversion to flexbox for printing clinical order only */
.head {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
border-bottom:1px solid black;
padding-bottom:5px;
margin-bottom:10px;
}
.value {
display:-webkit-inline-flex;
}
.row {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.head .row {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
}
.admLabel,.label,.label_left {
text-align:left;
font-family:Arial;
font-weight:700;
font-size:1em;
margin-right:3px;
}
.row.pushRight {
text-align:right;
-webkit-flex-direction:row;
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
.admPatientDetails .row {
margin-top:20px;
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:space-between;
}
.clinicalOrderLineAdministrationDetails table {
width:100%;
border-collapse:collapse;
}
.clinicalOrderLineAdministrationDetails table tbody tr {
border-bottom:1px dotted #818181;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}