まず、これは商用ソフトウェアです。何が起こっているのかを確認できるように、リンクを共有することはできません。うーん。すべてを難しくします。
印刷用に css のブロックを作成しました。ここに私のステップがありました：
- アプリケーションでページを読み込む
- 開発者ツールから HTML をコピーする
- htmlをjsfiddleに貼り付けます（したがって、すべてのクラス/構造が適切に存在します）
- css を jsfiddle に記述します。
- cssをjsfiddleから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 では動作しますが、私のアプリでは動作しません。
私が試したこと：
- 閉じる/再開する
- クロムハードリフレッシュ (cmd-shift-R)
- これは共有コードです。私は自分の変更を開発環境にプッシュし、同僚のページにプルダウンして、彼のコンピューターでも機能していないことを確認しました。
アップデート
- これはオーバーライドの問題ではありません。他のすべてのcssファイルを削減/削除しましたが、問題は解決しません.
- これは、複雑なセレクターの特異性の問題ではありません。ほとんどすべてのセレクターは単一層/レベルです (例を参照)。
- これはブラウザの問題ではありません。Chrome や Firefox では機能しません (もちろん、これら 2 つのページのレンダリングはわずかに異なります)。
- 私はもともとjsfiddleからカット/ペーストしていたので、カット/ペーストの問題かもしれないと思いました. そうではありません-私たちは修正なしで手作業でクラスを書きました。
- これはスペルの問題ではありません。「.admItem」を「.georgeItem」に置き換えてテストし、それを正しい場所にカット アンド ペーストしましたが、修正されませんでした。
- 繰り返しますが、このコンテンツではなく、ファイルから他のコンテンツが表示されます。
- css ファイル全体を空にして、1 つのクラスだけを残しましたが、まだそれを取得できませんでした。
- 埋め込まれた CSS を HTML ファイルの先頭に入れました。この 1 つのクラスではそれも取得されませんが、そこに配置した他の値 (例: body text transform: uppercase) は取得されます。
- 開発者ツールをクリックして、現在の正しい変更を含む正しい css ファイルを表示できるため、ポインター/構文の問題ではありません。ファイルがそこにあることがわかり、他の値ではなく、そこからいくつかの値が選択されます。
いくつかのスクリーンショット:
Chrome デベロッパー ツール
埋め込み CSS
これがcssファイル全体です。.georgeItem { text-transform:lowercase!important; }
.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;
}