IE9 在输入中裁剪文本答案

【问题标题】：IE9 crops text in inputIE9 在输入中裁剪文本
【发布时间】：2015-08-05 09:18:55
【问题描述】：

我有一个样式化的输入。如果出现问题，这个输入可能是“红色的”。这是我的sn-p：

.field {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-weight: normal;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.3);
  vertical-align: baseline;
  -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);
  font-size: 16px;
  padding: 6px 8px 7px;
  margin: 0 !important;
  height: 32px;
  line-height: 17px;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.field.field-red {
  border-radius: 2px;
  border: 1px solid #d43517;
  -webkit-box-shadow: 0 0 0 1px #d43517;
  box-shadow: 0 0 0 1px #d43517;
}

<input type="text" class="field">
    <p />
    <input type="text" class="field field-red">

除了IE9之外的所有浏览器都可以。 IE9“裁剪”字母的底部（例如，q 和 g）。怎么了？

【问题讨论】：

标签： html css internet-explorer internet-explorer-9

【解决方案1】：

将填充从 field padding: 6px 8px 7px; 减少到 padding: 3px 8px 7px; 并从 height: 32px; 增加到 height: 35px;

.field {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-weight: normal;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.3);
  vertical-align: baseline;
  -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);
  font-size: 16px;
  padding: 3px 8px 7px;
  margin: 0 !important;
  height: 35px;
  line-height: 17px;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.field.field-red {
  border-radius: 2px;
  border: 1px solid #d43517;
  -webkit-box-shadow: 0 0 0 1px #d43517;
  box-shadow: 0 0 0 1px #d43517;
}

<input type="text" class="field">
    <p />
    <input type="text" class="field field-red">

【讨论】：

但这会改变设计和外观。
你可以调整填充和高度，只需要使用填充n高度值，我没有设计的想法，但为了防止字母不裁剪，必须在某处调整值介于两者之间，不要失去设计，问题也会得到解决。
更改这些可以解决问题而不会丢失设计和外观padding: 6px 8px 7px; height: 32px; line-height: 17px;
这很奇怪，因为在所有其他浏览器中都没有问题，即使是 IE8。
不，这并不奇怪，因为每个浏览器都有自己的 css 渲染引擎，而 ie-9 是一种浏览器版本，你可以说是实验版本，因为 ie-10 有更多重大更新，其中 ie-9 没有有初始发布版本，但 MS 发布的后续更新使情况变得更糟。