Html 什么'；我的CSS打印怎么了？

以下是我的CSS代码：

 @media print
        {
            body *
            {
                visibility:hidden;
            }
            #printable *
            {
                visibility:visible;
            }
            #printable
            {
                margin:0px;
                color : #000000;
                background : #ffffff;
                filter: Gray();
                filter: url('#grayscale'); 
                -webkit-filter: grayscale(100%); 
                filter: grayscale(100%);
                top:0px;
                left:0px;
            }

            @page
            {
                size:auto;
                margin:0mm;
            }

        }

我有这样的潜水艇

<div class="row" id="printable">

   ...

</div>

...

当我在网上打印时，上面的部分有太多的空白，主要内容几乎一半都是从纸上开始的。我的css有什么问题吗

抱歉，如果我无法显示图像..

错误#printable仍具有可见性：隐藏，请将代码更改为：

 @media print
        {
            body *
            {
                visibility:hidden;
            }
            #printable *
            {
                visibility:visible;
            }
            #printable
            {
                margin:0px;
                color : #000000;
                background : #ffffff;
                filter: Gray();
                filter: url('#grayscale'); 
                -webkit-filter: grayscale(100%); 
                filter: grayscale(100%);
                top:0px;
                left:0px;
    visibility:visible;
            }

            @page
            {
                size:auto;
                margin:0mm;
            }

        }

---

原因您使用了

可见性：隐藏
。它只是让元素看不见，但它们占据了原始空间。这就是为什么会有空白，我该怎么办。如果我使用
display:none
no display，您可以对
body*
使用
display:none
，但对于
#可打印
提供
显示：块
，对于
#可打印*
您可以根据需要提供
显示
属性值，内联或块等。你将需要具体说明，我已经这样做了，但仍然没有发生。。如果我在
#可打印的
中使用
display:none
并使用
display:block
或
display:inline
，仍然不起作用。谢谢你，伙计，我会继续尝试的。
#printable
不应该放在任何隐藏的容器下，而
#printable
中的元素也不应该隐藏。这将解决问题。尝试将此样式应用于网页本身。我只是在stackoverflow网站上做的，效果很好