Question

任何人都可以向我解释输入字段的＆＃34; size＆＃34; - 属性是如何工作的吗？

在合理的浏览器（例如Chrome）中，我设法将尺寸为12和尺寸为44的区域与1尺寸60区域一样宽（有一些边距）。但是，在Internet Explorer中，这两个字段比一个字段大得多。

在另一行，我有3个字段，12个大小中的2个，以及28个大小中的1个。从字段中删除所有边框/填充/边距后，我有以下内容，并且不明白为什么：

1个大小为60的字段= 327px宽度

2个字段，12＆amp; 44个尺寸（总共56个）= 87px＆amp;宽度为247像素（总宽度为334像素）

3个字段，12,12和＆amp; 28尺寸（总共52个）= 87px，87px＆amp; 167px宽度（总宽度341px）

为什么它在IE中以这种方式工作，但在其他浏览器中有所不同？有没有办法让它一致地工作，只使用CSS？（我没有其他方式可以轻松访问。我很清楚有更好的方法）

Answer 1

根据HTML5，size attribute指定“在视觉呈现中，用户代理允许用户在编辑元素值时看到的字符数”。这是一个有点不幸的表述，并不符合现实。 description in HTML 3.2更现实：“用于将文本字段的可见大小设置为给定数量的平均字符宽度”。 “平均字符宽度”的概念非常模糊，浏览器对它的解释也不同。

因此，size属性的实际效果除了其值之外还取决于字体的面和大小以及浏览器。有很大的差异。此外，如果连续有两个input个元素，在同一行上，占用的总宽度也取决于元素之间的间距（如果有的话）。

如果您想让两个input字段相互接触，并且在它们下面有第三个input字段，这样它就会占据与两个字段完全相同的宽度，那么您应该设置它们CSS 和中的width属性设置框模型，以便宽度包括填充和边框。例如：

<style>
input { box-sizing: border-box }
</style>
<input style="width: 12ch"><input style="width: 44ch"><br>
<input style="width: 56ch">

如果您需要担心不支持ch单元的旧浏览器，请使用em单元（相当于“平均”字符宽度的2倍左右，非常粗略地说）：

<style>
input { box-sizing: border-box }
</style>
<input style="width: 6em"><input style="width: 22em"><br>
<input style="width: 28em">

（您还可以结合使用单位，使用em作为后备单位，例如width: 6em; width: 12ch。）

跨浏览器设置输入“大小” - 属性

1 个答案: