Question

我的问题与问题Textarea with horizontal rule showing up on print中的海报类似，我使用相同的代码，但使用变量可以轻松调整高度和颜色。问题是，当我从Chrome打印时，有些textareas有3行，有些有2行;但我可以确认每个元素的高度相同。此外，有时第一行比其他行轻得多。我附上了打印件generated from Chrome的图片。

为什么Chrome不尊重元素的高度？我该怎么做才能保持稳定？为什么Chrome会改变颜色？

@hrule-height: 40px;
@hrule-color: #aaa;
@hrule-background-color: white;

.item-response-lg {
        background-image: -webkit-linear-gradient(to right, @hrule-background-color 10px, transparent 10px), -webkit-linear-gradient(to left, @hrule-background-color 10px, transparent 10px), -webkit-linear-gradient(@hrule-background-color @hrule-height, @hrule-color @hrule-height, @hrule-color (@hrule-height + 1), @hrule-background-color (@hrule-height + 1));
        background-image: -moz-linear-gradient(to right, @hrule-background-color 10px, transparent 10px), -moz-linear-gradient(to left, @hrule-background-color 10px, transparent 10px), -moz-linear-gradient(@hrule-background-color @hrule-height, @hrule-color @hrule-height, @hrule-color (@hrule-height + 1), @hrule-background-color (@hrule-height + 1));
        background-image: -ms-linear-gradient(to right, @hrule-background-color 10px, transparent 10px), -ms-linear-gradient(to left, @hrule-background-color 10px, transparent 10px), -ms-linear-gradient(@hrule-background-color @hrule-height, @hrule-color @hrule-height, @hrule-color (@hrule-height + 1), @hrule-background-color (@hrule-height + 1));
        background-image: -o-linear-gradient(to right, @hrule-background-color 10px, transparent 10px), -o-linear-gradient(to left, @hrule-background-color 10px, transparent 10px), -o-linear-gradient(@hrule-background-color @hrule-height, @hrule-color @hrule-height, @hrule-color (@hrule-height + 1), @hrule-background-color (@hrule-height + 1));
        background-image: linear-gradient(to right, @hrule-background-color 10px, transparent 10px), linear-gradient(to left, @hrule-background-color 10px, transparent 10px), linear-gradient(@hrule-background-color @hrule-height, @hrule-color @hrule-height, @hrule-color (@hrule-height + 1), @hrule-background-color (@hrule-height + 1));
        background-size: 100% 100%, 100% 100%, 100% (@hrule-height + 1);
        border: none;
        line-height: (@hrule-height + 1);
        font-family: Arial, Helvetica, Sans-serif;
        width: 100%;
        height: (@hrule-height * 2-2);
}

检查每个高度是否相同..两者都返回值82。

$$('textarea').forEach((e) => console.log(e.clientHeight))
$$('textarea').forEach((e) => console.log(e.scrollHeight))

具有水平规则的Textarea，行数不一致

0 个答案: