跨浏览器设置输入“大小” - 属性 [英] Cross browser setting input "size"-attribute

问题描述

任何人都可以向我解释大小 - 输入字段的属性是如何工作的？在合理的浏览器（如Chrome）中，我设法将尺寸为12和大小为44的字段与一个大小为60的字段一样宽（有一定的余量）。但是，在Internet Explorer中，两个字段比一个字段大得多。

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

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

2场，12& 44尺寸（总尺寸56）= 87px&宽度为247px（总宽度为334px）

<3>，12,12& 28尺寸（52总尺寸）= 87px，87px&为什么它在IE中以这种方式工作，但在其他浏览器中有所不同？
是否有一种方法可以使其始终如一地工作，只使用CSS？ （我没有其他方法，但我清楚知道有更好的办法）

HTML5， size 属性指定在视觉渲染中，用户代理允许用户在编辑元素值时查看的字符数。这是一个有点不幸的表述，并不符合现实。 HTML 3.2中的描述更加真实：用于设置可见的大小文本字段赋予给定数量的平均字符宽度。 平均字符宽度的概念非常模糊，浏览器对它的解释也不同。

因此，大小属性除了它的值以外，还取决于字体和大小以及浏览器。有相当大的变化。此外，如果连续有两个 input 元素，则在同一行上，占用的总宽度也取决于元素之间的间距（如果有）。

如果你想要有两个输入字段相互接触，第三个输入字段，以便它们占据与两者相同的宽度，那么您应该在CSS 和中设置它们的宽度属性>设置框模型，使宽度包括填充和边框。示例： pre class =snippet-code-html lang-html prettyprint-override> < 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>  

b
$ b （你也可以梳理使用单位，使用 em 作为后备单位，例如 width：6em;宽度：12ch 。）

Can anyone explain to me how the "size"-attribute of input fields works?

In reasonable browsers (like Chrome) I managed to make a size 12 and a size 44 field just as wide (with some margin) as 1 size 60 field. However, in Internet Explorer the two fields are much bigger than the one field.

On another row I have 3 fields, 2 of a 12 size, and 1 of a 28 size. After removing all borders/paddings/margins from the fields, I have the following, and don't understand why:

1 field of size 60 = 327px width

2 fields, 12 & 44 size (56 total size) = 87px & 247px width (334px total width)

3 fields, 12, 12 & 28 size (52 total size) = 87px, 87px & 167px width (341px total width)

Why does it work that way in IE, but differently in other browsers? And is there a way to make it work consistently, using only CSS? (I do not have easy access to other ways. I'm well aware that there are better ways though)

解决方案

According to HTML5, the size attribute specifies "the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element's value". This is a somewhat unfortunate formulation and does not correspond to reality. The description in HTML 3.2 is more realistic: "Used to set the visible size of text fields to a given number of average character widths". The concept of "average character width" is very vague, and browsers interpret it differently.

Thus, the actual effect of a size attribute depends, in addition to its value of course, on the font face and size and on the browser. There is considerable variation. Moreover, if you have two input elements in succession, on the same line, the total width occupied also depends on the spacing (if any) between the elements.

If you want to have, say, two input fields touching each other and a third input field below them so that it occupies exactly the same width as the two combined, then you should set their width properties in CSS and set the box model so that the width includes padding and border. Example:

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

If you need to worry about old browsers that do not support the ch unit, use the em unit (which corresponds to about 2 times the width of an "average" character, very roughly speaking):

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

(You can also combine the use of units, using em as the fallback unit, e.g. width: 6em; width: 12ch.)

这篇关于跨浏览器设置输入“大小” - 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！