INPUT 和 SELECT 元素自定义大小

Posted 2023-03-05

【中文标题】INPUT 和 SELECT 元素自定义大小

【英文标题】：INPUT and SELECT elements custom size

【发布时间】：2010-10-30 02:04:52

【问题描述】：

据我了解，宽度/填充/边距属性仅适用于块级元素。但是，在 INPUT 和 SELECT 元素上，我可以指定宽度，这是可行的。应该吗？

我可以这样写：

<input type="text" style="display:block;" />

但有必要吗？

谁能解释一下它为什么有效？

【参考方案1】：

实际上，它们并不是真正的内联元素，而是内联块元素。这允许您指定宽度、高度和其他特定于块的属性，而无需中断内联元素的流动。 In good browsers 你可以在任何元素上使用“display:inline-block”来实现同样的效果。

【讨论】：

虽然它不是一个广泛的测试，但至少在 Firefox 3 中，输入元素的计算样式（没有作者样式来更改它）是 display: inline - 不是 inline-block。

@David，是的，你是对的，尽管我假设（我找不到任何证据）Mozilla 在内部使用“display:-moz-inline-box”。我也做了一些测试，似乎 IE8 和 Chrome2 报告 SELECT 元素的“inline-block”，而 Opera9 报告“inline”。话虽如此，我相信您的答案是正确的，但假设这些元素为“display:inline-block”是相当安全的。

【参考方案2】：

The spec says:

适用于：所有元素，但不可替换的内联元素、表格行和行组

表单控件，例如输入和选择元素被替换内联元素（该元素被替换为表单控件 - 它的文本内容不像普通元素那样显示）。

由于它们被替换，它们不是不可替换的，所以宽度属性适用。

【参考方案3】：

表单元素是 html/CSS 世界的害群之马——有很多属性不能像普通的 HTML 元素那样工作。

虽然它没有回答您的问题，但您可能会发现以下讨论很有趣：http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

【参考方案4】：

从技术上讲，这是特定于浏览器的呈现属性。在这一点上，大多数浏览器确实允许您设置宽度，但不能保证（尤其是在旧浏览器上），您肯定会遇到错误。

输入元素的 W3 规范在技术上使其成为内联元素。内联块甚至不是 W3 规范的一部分，它是 CSS2 的一部分（因此旧浏览器不一致）。

例如，如果您将宽度指定为百分比并在其中放入大量文本，IE 会有一些有趣的错误。

长话短说，它几乎总是安全的，只是不是我见过的任何官方规范的一部分。

【参考方案5】：

如果这不可能发生，你想过吗？引入 INPUT 元素时，没有 CSS。在 HTML 中，INPUT 元素的宽度绝对是创建正确表单所必需的。

【讨论】：

我明白了......这些天来做这件事的正确方法是什么？对它们指定 display:block 还是仅仅将这些元素视为历史例外？

Display:block 仅在出于某些原因需要时才应使用。