javascript - 输入文本的文本对齐方式

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属性似乎没有任何影响:(

我检查了Crossbrowser input text vertical alignment正如 SO 所建议的那样，但我仍然无法按要求进行工作。

我可能遗漏了什么。欢迎提出任何建议(按偏好降序阅读 css、html 或脚本):)

作为旁注，从用户体验的 Angular 了解 MS 为何决定更改 input 的行为也将是一件好事。 MS IE 8 之后的文本。

[编辑]:我正在处理遗留代码。有人建议我不要进行会破坏自动化 UI 测试的更改。所以，<textarea>不是首选。同样，包装在 <div> 中或替换为 jquery基于替代方案不被考虑。

Answer 1

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

input {
  width:210px;
  height:10px;
  padding:20px;
}

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