我一直在尝试使用此代码在我的textarea中打印行：

<textarea> with horizontal rule

这是代码：

.notes {
    background-image: -webkit-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -moz-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -ms-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -o-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 31px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 31px;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 8px;
}

.notes:focus {
    outline: none;
}

body {
    background-color: #eee;
}

<textarea class="notes"></textarea>

我在表格中使用了多个带有多个TD单元格的textarea框 . 当我使用另一个功能时，我的textarea框的高度也从21px，42px和63px调整，但textarea中的字体和线条保持不变 . 屏幕上的一切看起来都很好 .

问题是当我尝试打印它时，我的textarea框中的线条有时不会出现 .

我使用以下代码使用代码打印填充了输入textarea的网页内容：

frameDoc.document.write（' . worksheet_format_part2_input_textbox {background-color：white; background-image：-webkit-linear-gradient（white，white 18px，＃ccc 18px，＃ccc 20px，white 20px）; background-size：100 ％20px; line-height：20px; font-size：13px; padding：2px; border：1px solid #ccc;}'）;

例如，如果我将textarea高度设置为63px，则会显示4条输入线和3条打印线 . 但是一些单元格只有2条打印线（第一条输入线大于第二条和第三条，没有第四条输入线） .

这可能是什么问题？

更新：好的我不确定我是否已正确解释它，但基本上我正在尝试添加行到我的textarea并使用javascript调整大小，后来打印 . 在屏幕上它显示为它们应该是，但是一旦我预览它进行打印，textarea线就会丢失 .

我查看了调整我的textarea大小的代码，看起来这是我更改高度时导致问题的原因，例如：

var e_notes = document.getElementsByClassName（'notes'）; for（var i = 0; i <e_notes.length; i）{e_notes [i] .style.height =“90px”; // e_notes [i] .style.height = 4“em”; }

'notes'是我所有textarea元素正在使用的textarea类的名称 . 在CSS中我设置了固定的宽度和高度（高度：100px;宽度：100px;） . 将新高度设置为90px将起作用，但线条将丢失 . 如果我将其设置为100px（原始大小），则显示行 . 我还在努力 . 似乎可能需要重新加载textarea元素？

javascript css printing textarea