gpt4 book ai didi

html - Firefox 输入字段中的下降部分

转载 作者:行者123 更新时间:2023-11-28 15:12:08 25 4
gpt4 key购买 nike

我有以下代码:

<html>
<head>
<style>
input {
/* line-height: 1.6em; */ /* doesn't seem to make any difference */
height: 1.6em;
}
</style>
</head>
<body>
<form action="foo" method="POST" enctype="multipart/form-data">
<label>First Name:</label> <input type="text" value=""/>
</form>
</body>
</html>

当我将代码放在我的文件系统或 JBoss 服务器中的文件中并导航到它时,Firefox 57.0.3 没有呈现足够高的文本输入字段,导致所有被剪裁的字母:

enter image description here

Chrome 渲染得很好。

奇怪的是,jsfiddle从 Chrome 和 Firefox 中正确呈现。

我做错了什么,为什么我不能在 jsfiddle 中重现它?

我假设 1em 的高度就足够了,更不用说 1.6em 了。

最佳答案

这可能是由于字体和小于默认 height 值的组合。在我的系统上,默认字体大小为 13.3333px,默认(计算)高度为 23px。这是大约 1.725 的比率,略高于您的 1.6em

1em 高度不够,因为绘制输入字段涉及边框和填充。参见下面的盒子模型:

screenshot of box model

由于 active by default 的 CSS 规范化,您无法在 jsfiddle 中重现它.

关于html - Firefox 输入字段中的下降部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48122060/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com