输入中的文本在 safari 中垂直剪切

问：

我有一个问题。密码输入类型中的点被剪掉了，我只能看到屏幕截图中的一半。关键是，无论是在 chrome 还是 safari 中，它都没有垂直对齐。但在镀铬中，它至少是可见的。输入的图像，点在一半可见

<div class="input">
        <p>Password:</p>
        <div>
            <input type="password" class="button" id="password" name="password">
            <button type="submit" value="password" class="button">Enter</button>
        </div>
     </div>

风格

input[type=password] {
    font-family: modern_dos_8x8regular;
    font-size: 1rem;
    border: 1px solid black;
    border-radius: 2px;
    color: black;
    text-shadow: 1px 1px 2px #7c7c7c;
    background-color: transparent;
    line-height: normal;
}

input[type=password]:after {
    line-height: normal;
}

我试图将行高设置为正常，但它似乎不起作用，我必须将其置于 100% 以上的行高属性，喜欢看到完整的点，唯一的问题是它使输入更大，我不想要它。我不想使用负填充，因为它也会在 chrome 或其他浏览器中设置