Question

以下是我的示例可打印申请表，允许我的用户填写他们的信息并将其打印出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pritable Document</title>
    <style>
        p{
            font-size: 20px;
        }
        .fillin {
          border-bottom: 2px dotted #888;
          font-weight: bold;
          line-height: 12px;
        }
    </style>
</head>
<body>
    <p>
    Name:<span class="fillin">Jonh Nathon</span>
    </p>
    <p>
    Gender:<span class="fillin">Male</span>
    </p>
    <p>
    Date of Birth:<span class="fillin">10-July-1990</span>
    </p>
</body>
</html>

作为可填充空间的虚线点（...）在浏览器上看起来很好，但是当我将其打印出来时，它看起来与浏览器上的不同。它有点像方形和星号。

我如何在CSS中修复此问题，因为我已经使用border-bottom样式dotted？感谢。

Answer 1

尝试使用预定义的html方式来做到这一点！

<!DOCTYPE HTML>
<html>
<head>
<style>
    u.dotted{
      border-bottom: 1px dashed #999;
      text-decoration: none; 
    }
</style>
</head>
<body>
     Name: <u class="dotted">John Nathon</u>
</body>
</html>

在纸张上打印时，虚线点看起来不同

1 个答案: