更新

Question

首先：它是商业软件，我无法共享它的链接，所以你可以看到发生了什么。啊。让事情变得更难。

我为了打印目的写了一块css。这是我的步骤：

在应用程序中加载页面
从开发人员工具中复制HTML
将html粘贴到jsfiddle中（因此，所有类/结构都正确存在）
在jsfiddle中写css - 看起来好像我希望它看起来
将来自jsfiddle的css复制到我的inquiryPrint.css文件（加载用于打印的文件）
某些css有效，有些没有

我考虑的事情：

覆盖问题; inquiryPrint.css是最后加载的文件，最后应该应用它的覆盖

仅在印刷媒体类型上调用print css文件...实际上，这里是：

printWindow.document.write('&lt;link rel="stylesheet" href="../css/InquiryPrint.css" type="text/css" /&gt;');

这是最重要的，我认为：该网站正在从inquiryPrint.css文件中获取一些有效的CSS选择器，但不是所有这些;例如，它看到.row并应用它的CSS，但没有看到.admItem并应用它的CSS。这就是在jsfiddle中正常工作的东西 - 即。 .admItem在jsfiddle中工作但不是我的应用程序。

我尝试的事情：

关闭/重启
chrome hard refresh（cmd-shift-R）
它的共享代码;一世将我的更改推到我们的开发环境中，将它们拉下来同事的页面，并验证它不能在他的电脑上工作无论是。

更新

这不是覆盖问题。我们甚至减少/删除了所有其他css文件，问题仍然存在。
这不是复杂选择器的特异性问题。几乎每个选择器都是单层/级别（参见示例）。
这不是浏览器问题。它在Chrome或Firefox中不起作用（当然，这两个页面略有不同）。
我最初是从jsfiddle剪切/粘贴的，所以我认为它可能是剪切/粘贴问题。它不是 - 我们手工编写了没有修复的类。
这不是拼写问题，我们通过将'.admItem'替换为'.georgeItem'并将其剪切/粘贴到正确的位置进行测试，但没有修复它。
同样，它正在查看文件中的其他内容，而不是此内容。
我们把整个css文件剥离了，只剩下一个类，它仍然没有把它拿起来。
我把嵌入式CSS放到了HTML文件的头部，对于这一个类，它也没有选择它，但它正在拾取我们放在那里的其他值（例如正文文本转换：大写）。
我们可以点击开发人员工具并查看正确的css文件，并使用正确的当前更改，因此它不应该是指针/语法问题 - 它会看到文件存在，并从中选择一些值，而不是其他。

一些屏幕截图：

Chrome开发者工具

chrome developer tools

嵌入式CSS

embedded 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;
}

Answer 1

我们昨晚发现了这个问题。我们在javascript中动态生成页面的方式，页面顶部没有doctype声明。一旦我们添加了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一切都很好。叹。

Answer 2

该网站正在从inquiryPrint.css文件中获取一些有效的CSS选择器，但不是所有这些;例如，它看到.row并应用它的CSS，但没有看到.admItem并应用它的CSS。这就是在jsfiddle中正常工作的东西 - 即。 .admItem在jsfiddle中工作但不在我的应用程序中。

听起来好像其他未定位于任何介质的样式表，通过使用更具体的选择器来覆盖打印样式表中的规则。

Answer 3

使用像Firebug这样的工具，您将能够看到正在应用哪些CSS规则以及它们为什么要覆盖其他样式。

正如CBroe所说，具有更多特定选择器的CSS样式很可能会覆盖样式表。显然你的样式表正在被阅读，所以这不是问题。

为什么css在JSFiddle中工作但在我的App / Site中不起作用

更新

Chrome开发者工具

嵌入式CSS

3 个答案: