3

特定の画像のみを印刷し、ページ全体をカバーするように画像のサイズを変更するスタイルシートを作成しようとしています。

media = "print"スタイルシートには、次のものがあります。

@page { 
    margin: 0.5in; 
}
body {
    width: 100%;
}
body * {
    visibility: hidden;
}
#specificimage {
    visibility: visible;
    position: fixed;
    top: .5in;
    left: .5in;
    width: 7.5in;
    height: auto;
}

html構造は次のようになります。

<body>
    <div>
        <div>
            <div>
                <img id="specificimage" src="image.png" />
            </div>
        </div>
    </div>
</body>

Firefox 19で正常に印刷されますが、正しく動作するのは私がテストした唯一のブラウザです。IE9は何も表示しません。Safari 5.1.7（PC）は、ページの左側に画像のほんの一部しか表示しません。Chrome 25は画像全体を表示しますが、ページのごく一部に表示されます。

誰かが私が試すことができる他の何かを知っていますか？

4

1 に答える 1

1

コメントでDiodeusが指摘しているように、親が表示されていなくても、特定の要素の可視性は重要ではありません。実際、多くのブラウザでは、リソースは読み込まれません。

私はこれらの変更を提案します：

* {
    background: none          !important;
    direction:  ltr           !important;
    display:    none          !important;
    font-size:  0             !important;
    height:     0             !important;
    line-height:-9999         !important;
    margin:     0             !important;
    padding:    0             !important;
    position:   static        !important;
    text-indent:-9999em       !important;
    width:      0             !important;
    white-space:normal        !important;
}

html, body, div, #specificimage {
    display:    block         !important;
}

#specificimage {
    left:       0             !important;
    position:   fixed         !important;
    top:        0             !important;
    width:      100%          !important;
}

*ルールはかなり重いですが、次のことを確認してください。

  • サイズ（または1ページより高いページ構造のため、ページ数）は、境界線、高さ、マージン、幅の影響を受けるメトリックの影響を受けません。
  • aのすぐ内側のテキストdivは表示されません：負のテキストインデント、左から右への強制的な方向、およびゼロのフォントサイズと空白による強制的な折り返し：通常は、テキストが左に非表示になり、幅が拡張されないことを意味します。負の行の高さは、上部にも隠れることを意味し、極端に長い場合は高さ（またはページ数）を拡張しません。
  • 位置：静的とは、左、右、上、または下がページキャンバスを必要以上に拡張しないことを意味します。
  • そもそも要素にこれらのプロパティのいずれかを与えるルールは常に強力になるため、重要なルールがあります。ドキュメントの構造について仮定することなく、このオーバーライドを適用する必要があります。この切り札をより具体的なクラスおよびセレクターベースのルールを指定して作成する必要がある場合は、アスタリスクに何度でも!important追加できますが、インラインスタイルまたは重要度が切り替えられたIDセレクターを持つルールに対しては役立ちません。:nth-child(n)
于 2013-03-14T18:16:21.577 に答える