如何在IE8中获得输入的底部填充？

Question

我正在应用程序查看器中运行一个站点。此查看器将以IE8兼容模式呈现网站，我无法控制，无法更改。

我有一个input，其顶部/底部padding为6px，左/右padding为12px，但由于某些奇怪的原因，bottom padding被忽略而{ {1}}不正确。

以下是我所看到的截图：

以下是我用来设置padding字段样式的CSS：

input

我已经用Google搜索了一段时间，似乎无法找到问题的解决方案。我发现的许多提示建议使用各种input[type="text"] { line-height: 1.42857143; vertical-align: middle; font-size: 14px; font-weight: normal; padding: 6px 12px 6px 12px; *padding: 6px 12px 6px 12px; } 调整，而有些则建议使用line-height。这些提示都不起作用，问题仍然存在。

如何强制输入在IE8中具有相同的顶部和底部填充？

注意：我无法使用*padding: 6px 12px 6px 12px;元标记，因为它会导致查看器出现其他问题。

Answer 1

尝试从height加上使用padding-top/bottom加上box-sizing:border-box的三倍，以避免对这些值求和。

所以：padding-top/bottom:6px x 2 = 12px然后在我height 36px input[type="text"] { line-height: 1.42857143; vertical-align: middle; font-size: 14px; font-weight: normal; padding: 6px 12px; height: 36px; box-sizing: border-box; }中将其增加三倍

段

<input type="text" value="555-1234567" />

{{1}}

Answer 2

你不能 :(

您可以设置常规标签的样式：

＆＃13;

＆＃13;

span {
  float: left;
  border: inset gray 2px;
  background: white;
  line-height: 2em;
  height: 2em;
}

span input {
  border: none;
}

.submit,
.submit input {
  background-color: #337AB7;
  border: solid #337AB7 2px;
  width: 3em;
  color: white;
  text-align: center;
}

p {
  display: inline-block;
  box-shadow: 0 0 3px white;
}
body {
  background: tomato;
}

＆＃13;

<p>
  <span>
   <input type="text" value="(800) 123-456789" /> 
  </span>
  <span class="submit">
   <input type="submit" value="Dial"/><!-- unless this a link , styles to be applied here & span can be skipped -->
  </span>
</p>

＆＃13;

＆＃13;

＆＃13;