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 中打印良好，但这是我测试过的唯一可以正常工作的浏览器。IE 9 不显示任何内容；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;
}

该*规则非常繁重，但要确保：

  • 大小（或页数，因为页面结构高于一页）不受度量值的影响，度量值受边框、高度、边距、宽度的影响；
  • a 内的文本div不可见：负文本缩进，从左到右的强制方向，加上零字体大小和通过空格强制换行：正常意味着它将隐藏到左侧并且不会扩展宽度。负的 line-height 意味着它也将被隐藏到顶部，如果它非常长，则不会扩展高度（或页数）。
  • 位置：静态意味着左、右、上或下不会扩展页面画布超出其需要的范围。
  • 重要的规则就在那里，因为任何将这些属性中的任何一个首先赋予元素的规则总是会更强大。在不对文档结构做出假设的情况下，我们必须应用此覆盖。如果您需要使这个王牌更具体的类和基于选择器的规则!important指定，您可以附加:nth-child(n)到星号任意次数，但这对内联样式或具有切换重要性的 ID 选择器的规则没有帮助。
于 2013-03-14T18:16:21.577 回答