css - 为什么 css 在 JSFiddle 中有效但在我的应用程序/站点中无效

Question

首先:它是商业软件，我不能分享它的链接，所以你可以看到发生了什么。啊。让一切变得更难。

我已经为打印目的编写了一个 CSS block 。这是我的步骤:

1. 在应用程序中加载页面
2. 从开发者工具复制 HTML
3. 将 html 粘贴到 jsfiddle(因此，所有类/结构都正确)
4. 在 jsfiddle 中编写 css——东西看起来像我想要的样子
5. 将 jsfiddle 中的 css 复制到我的 inquiryPrint.css 文件(为打印加载的文件)
6. 部分 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)
• 它是共享代码；我 将我的更改推送到我们的开发环境，将它们拉下来 同事的页面，并验证它不能在他的电脑上工作 要么。

更新

1. 这不是覆盖问题。我们甚至减少/删除了所有其他 css 文件，但问题仍然存在。
2. 这不是复杂选择器的特异性问题。几乎每个选择器都是单层/级别(参见示例)。
3. 这不是浏览器问题。它在 Chrome 或 Firefox 中不起作用(当然，这两个页面呈现略有不同)。
4. 我最初是从 jsfiddle 剪切/粘贴的，所以我认为这可能是剪切/粘贴问题。这不是——我们——没有修复地手工编写类。
5. 这不是拼写问题，我们已经通过将“.admItem”替换为“.georgeItem”并将其剪切/粘贴到正确的位置来测试它，但没有修复它。
6. 同样，它看到的是文件中的其他内容，而不是此内容。
7. 我们将整个 css 文件剥离为空，只留下一个类，它仍然没有提取它。
8. 我将嵌入式 CSS 放入 HTML 文件的头部，对于这个类，它也没有拾取它，但它拾取了我们放在那里的其他值(例如正文转换:大写)。
9. 我们可以点击开发人员工具并查看正确的 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;
}

Answer 1

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

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

一切正常。叹。