输入文本对齐在不同的浏览器中表现不同

Question

我使用box作为令牌代码，但输入文本对齐在不同的浏览器中会有所不同。 在Chrome中

在Internet Explorer中：

输入文字和框的代码如下：

<style>
input.box {
	height: 9px;
	padding: 3px 3px 8px;
	border: 1px solid #999;
	width: 145px;
	padding-top: 4px;
}
</style>


<input path="token" id="token" tabindex="2" maxlength="35" class="box"
								placeholder="token"  />

我们可以在 Chrome 中查看底部空间，并在框中与 Internet Explorer 进行比较。< / p>

请告诉我，如何解决这个问题？

Answer 1

由于<input>元素或一般的表单元素，取决于浏览器本身，它取决于浏览器（和操作系统）的外观。例如，Windows上的Chrome和Firefox支持padding，但IE不支持它。

作为解决方法，您可以添加line-height，请查看以下示例：

＆＃13;

＆＃13;

input.box {
    height: 9px;
    padding: 3px 3px 8px;
    border: 1px solid #999;
    width: 145px;
    padding-top: 4px;
    line-height: 8px;
}

＆＃13;

<input path="token" id="token" tabindex="2" maxlength="35" class="box"
								placeholder="token"  />

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以像这个答案一样编辑CSS：

input.box {
  height: 15px;
  padding: 5px;
  border: 1px solid #999;
  width: 145px;
  vertical-align: middle;
  display: inline-block
}

<input path="token" id="token" tabindex="2" maxlength="35" class="box" placeholder="token" />

Answer 3

假设您的意思是您可以使用line-height CSS属性来执行此操作。只需将其设置为与元素的height相同即可。

Answer 4

使用line-height代替String areaCode = name.substring(name.indexOf("(")+1,name.indexOf(")")); String personalNo = name.substring(name.indexOf(")")+1); 进行IE浏览。