Question

我需要在打印文档中绘制一条小的垂直分隔线。当我在CSS类中应用它时，它与firefox和IE8的效果非常好，但样式不适用于chrome。样式在我的css文件的@media打印中。

.verticalLine1 
{border:0.5px #B1B1B1;
border-style:solid;
border-top-width:15px;
width:1px;
}

有什么指针可以解决这个问题吗？

Answer 1

在CSS文件中尝试此操作：

.verticalLine1 {
    visibility: hidden;
    border: 0.5px #B1B1B1;
    border-style: solid;
    border-top-width: 15px;
    width: 1px;
}
@media print {
    .verticalLine1 {
        visibility: visible;
    }
}

并包含CSS文件没有 media="screen"属性，没有任何JavaScript点击事件

<link href="styles/print.css" rel="stylesheet" type="text/css"/>

Answer 2

经历了两天的悲惨日子之后，我无法通过适当的解决办法解决问题。但是我没有其他选择

使用代码内联编写样式非常完美。代码如下所示

<div style="border:0.5px #B1B1B1;border-style:solid;border-top-width:15px;width:1px;"></div>

由于上一种方法不是一个很好的编码实践，我被迫创建一个具有上述尺寸的图像，并将其作为代码的一部分添加。

感谢chrome.Atleast它添加了图像，如果不是css。

Answer 3

为边框添加图片绝不是一个好主意。此外，您需要记住，chrome会将十进制值截断为最接近的较小数字。由于这个0.5px将被解释为0px而不是。我建议使用1px而不是0.5px。这将消除这么多问题。

chrome中的打印命令不适用于css样式

3 个答案: