输入文本

Question

请考虑以下用于输入标记的html代码段 -

Test Input : <input id="1" name="1"  style="width:250px;height:50px;" value="Check alignment" />

在MS IE 8之前，默认情况下input文本是顶部对齐的（下面的屏幕截图）。

启动MS IE 9及更高版本，input文本居中对齐（下面的屏幕截图）。

我要求所有input在MS IE 9及更高版本中排在最前面（其他浏览器 - chrome，firefox等并不是很重要）。

我尝试了一些样式选项（如下所示）但无法获得MS IE 8中显示的顶部对齐方式。

• align可用的input属性似乎不适用于文字。它似乎适用于图像。
• text-align属性仅水平对齐文本。没有垂直对齐方式。
• vertical-align属性似乎没有任何影响：（

我按照SO的建议检查了Crossbrowser input text vertical alignment，但我仍然无法按要求工作。

我可能会遗漏一些东西。任何建议（按优先级递减顺序读取css，html或脚本）都是受欢迎的：）

作为旁注，从UX的角度来看，为什么MS决定在MS IE 8之后改变input文本的行为也是一件好事。

[编辑] ：我正在处理遗留代码。我被告知可能会破坏自动UI测试的更改。所以，<textarea>不是第一选择。同样地，使用<div>或替换为基于jquery的替代方案包装不正在考虑中。

Answer 1

一个简单但交叉浏览器风格的解决方案是使用填充来控制文本的位置。见下文

＆＃13;

＆＃13;

Input : <input id="1" name="1" value="Check alignment" />

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

<input type=”text”>只是一个单行输入字段，它正常工作，你确定你不想使用textarea吗？

无论如何，尝试使用填充顶部和底部具有垂直对齐的视觉相似性

Answer 3

我没有看到一种方法，但从输入中删除所有样式，将其包装在div中并使其看起来像您想要的输入（边框，阴影等），也使用js让它触发点击单击包装器div中的任何位置时的输入。