Question

以下尺寸属性无效。为什么呢？

<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba">

它默认为60个字符，而且我似乎没有办法改变它。

Answer 1

据推测，你有一些影响它的造型。它没有任何样式规则，works just fine。但是，当您应用尺寸较小的样式规则that takes precedence。

时

要确定影响它的样式规则，请右键单击它并选择“检查元素”，然后查看右侧显示的样式信息。

Answer 2

使用textarea元素代替input元素：

<textarea cols="80" rows="1" style="overflow: visible" placeholder=
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea>

这会产生更一致但不完全一致的渲染。设置overflow: visible是为了使IE保留80个字符的空间，否则只有79个适合，因为垂直滚动条。

为什么问题会出现在input：

中

属性size="80"将字段的可见宽度设置为80个字符的“平均”宽度。这不是完全定义的（什么是“平均值”？），并且浏览器甚至不合逻辑地实现它：使用size="80"倾向于提供比默认宽度20个字符的4倍宽度少得多的宽度。因此浏览器甚至不一致。比例取决于字体和浏览器。（这也发生在其他浏览器上。）

如果您需要继续使用input：

您可以使用style="width: 80ch"，但并非所有浏览器都支持此CSS3功能，并且无法保证它已正确实施。根据定义，ch单位是数字零的前进宽度“0”，其在大多数字体中通常与数字的前进宽度相同。（例如，Firefox几乎正确地实现了这一点。几乎，但不完全。）

您可以将<input>元素中的字体设置为某种等宽字体。这不会消除问题，但会使宽度更接近指定的宽度。

Answer 3

自Mac OS Lion上的Google Chrome 26起，不支持“ch”单位。

在使用内联样式“width：16ch”检查元素时，样式将标记为“无效的属性值”。其他常用单位（pt，px，em，％）可以接受。

Answer 4

如果您想知道为什么输入 60个字符，则确定有多少字符称为 maxlength 的属性：

<强> MAXLENGTH

如果type属性的值是text，email，search，password，tel或url，则此属性指定用户可以输入的最大字符数（以Unicode代码点为单位）;对于其他控件类型，它将被忽略。它可以超过size属性的值。如果未指定，则用户可以输入无限数量的字符。指定负数会导致默认行为;也就是说，用户可以输入无限数量的字符。仅当属性的值已更改时才会计算约束。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

尺寸仅确定字符宽度，而不是用户可以输入的数量。

Answer 5

我遇到了同样的问题，在尝试了很多其他解决方案之后，我通过在输入字段中添加宽度来修复此问题。

input {
    width:90px; /* Your width may vary */
}

为什么Chrome会忽略文字输入的“尺寸”属性？

5 个答案: