CSS Print Stylesheet: hide everything except specific image, show that full-page

问题

I'm trying to build a stylesheet that prints only a specific image, and sizes the image to cover the entire page.

In my media="print" stylesheet, I have:

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

The html structure is similar to this:

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

It prints fine in Firefox 19, but that is the only browser I've tested that works correctly. IE 9 doesn't show anything; Safari 5.1.7 (PC) shows only a sliver of the image on the left side of the page; Chrome 25 shows the full image, but in a small portion of the page.

Anyone know of anything else I can try?

回答1:

As Diodeus notes in the comments, the visibility of any given element doesn't matter if its parent is not displaying — in fact in many browsers the resource won't even be loaded.

I would propose these changes:

* {
    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;
}

The * rule is pretty heavy, but makes sure that:

The size (or number of pages, because of a page structure taller than one page) will not be influenced by metrics, which is influenced by border, height, margin, width;
Text immediately inside a div is not visible: negative text indent, forced direction of left to right, plus zero font-size and forced wrapping via white-space: normal mean it will be hidden out to the left and won't extend the width. a negative line-height means it will be hidden off to the top too, and won't extend the height (or number of pages) if it's extremely long.
Position: static means left, right, top or bottom won't extend the page canvas more than it needs.
The important rule is there because whatever rules giving any of these properties to your elements in the first place will always be stronger. Without making assumptions about the document structure, we have to apply this override. If you need to make this trump more specific class and selector-based rules with !important specified, you can append :nth-child(n) to the asterisk any number of times, but this won't help against inline styles or rules with ID selectors that also have importance toggled.

来源：https://stackoverflow.com/questions/15416557/css-print-stylesheet-hide-everything-except-specific-image-show-that-full-page

标签

css

printing

stylesheet