谷歌浏览器输入文本被截断。是字体问题还是浏览器问题？答案

【问题标题】：Google Chrome input text is cut off. Is it font issue or browser?谷歌浏览器输入文本被截断。是字体问题还是浏览器问题？
【发布时间】：2016-07-08 13:39:38
【问题描述】：

正如您在粉红色背景的第一个块中看到的那样，输入值为“ÄÄÖÖÖÜÜ”的输入顶部没有点。

这种行为只有在输入标签上设置了 height 属性。

是字体问题还是谷歌浏览器错误？

很遗憾，我无法从所有输入字段中删除项目的高度属性。

如何解决这个问题？

PS。 Firefox 和 IE 没有这个 bug。

谢谢。

【问题讨论】：

iPad 上的 chrome 上没有发生这种情况
可在 Windows 10、Google Chrome 51.0.2704.106 m 中重现
您似乎已经回答了自己的问题。您的测试已经表明 Chrome 中会发生这种情况，但前提是您的输入字段中指定了 height。这显然是一个浏览器问题，虽然我知道您觉得这无法访问，但您有解决路径（改变高度）。您是否考虑过保持height 不变但减小字体大小？
你试过让高度和行高一样吗？
根据我的经验，未优化的网络字体在浏览器和操作系统之间会出现行高不一致的情况。我的意思是他们在分配的线路上太高或太低了。我见过的唯一解决方法是找出哪些浏览器存在问题，定位它们，并根据具体情况更改行高

【解决方案1】：

将height 更改为min-height

font-family: 'adihausregular',Arial,Helvetica,Verdana,sans-serif;
font-size: 40px;
min-height: 60px;
line-height: 54px;
width: 100%;

看来，如果你愿意，你也可以添加max-height: 60px;，它仍然有效。

【讨论】：