Question

在我正在处理的网站上，我注意到input框的大小与我p的大小不同。在FF中，p的默认大小为20px，input为17，但如果将它们都设置为1em，则p保持不变，正如预期的那样，但input 1}}增加到21.为什么input随1em增加，根据定义它应该保持不变？如何轻松地在我的页面上获得相同大小的所有字体？我也用IE检查了这个，我得到了相同的结果。即使我使用PX也会做同样的事情。

<p>p = 20px</p>
<p style="font-size:1em;">p with 1em = 20px</p>

<input type="text" value="input text = 17"><br>

<input type="text" value="input text w/ 1em = 21" style="font-size:1em;"><br>

<input type="text" value="input text w/ 17px = 22" style="font-size:17px;"><br>

Answer 1

font-size的em单位基于元素默认的font-size。 pem和输入上的1em可能会有不同的结果，因为它们以不同的默认字体大小开始。

尝试只给它们显式的像素值：

<强> CSS

p {
    font-size: 16px;
}

input {
    font-size: 16px;
}

或者让您的网站重置一下：

<强> CSS

* {
    font-size: 16px;
}

Answer 2

这里有两个可能的罪魁祸首：字体和盒子模型。由于em单位基于字体大小，因此p和input中不同的字体系列或大小会导致em的值不同。

Box模型定义了width和height值的处理方式：它是否测量到填充（content-box）的内部或边界的外部（{{1} }）。您可以使用border-box CSS属性设置框模型。

Answer 3

因此，第二个输入的文本实际上是根据标准的p标签字体大小调整大小的。因此，如果p标记的默认字体大小为16px，则无论您使用哪种元素，1em都将等于16px。这是一个显示这个的例子：

alert('Font-size of second input: ' + $('.input-2').css('font-size'));

p:nth-child(2) {
  font-size: 1em;
}

.input-2 {
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Unstyled p tag</p>
<p>P tag with font-size of 1em</p>

<input type="text" value="Name" />
<input class="input-2" type="text" value="Name" />

要解决此问题，我建议使用px单位，因为这些是绝对的。这是一篇解释CSS大小单位的文章：https://css-tricks.com/css-font-size/

修改

这是一支笔，演示了如何使用像素代替em s：

* { font-family: monospace; } p, input { font-size: 17px; }

<p>Unstyled p tag</p> <p>P tag with font-size of 1em</p> <input type="text" value="Name" /> <input class="input-2" type="text" value="Name" />

希望这有帮助！

Answer 4

如果添加* {font-family: "Helvetica";}输入框使用不同的字体系列，则设置为1em的所有字体都是正确的大小。仍然不确定为什么无格式输入的大小不一样，但设置为1em会将其设置为正确的大小。

＆＃13;

* {font-family: "Helvetica";}

＆＃13;

<p>p = 20px</p>
<p style="font-size:1em;">p with 1em = 20px</p>

<input type="text" value="input text = 17"><br>

<input type="text" value="input text w/ 1em = 20" style="font-size:1em;"><br>

<input type="text" value="input text w/ 17px = 21" style="font-size:17px;"><br>

＆＃13;

如何获得与段落大小相同的输入文本框？

4 个答案: