html - IE9 在输入中裁剪文本

Question

我有一个样式输入。如果出现问题，此输入可以是“红色”。这是我的片段:

.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)。怎么了？

Answer 1

减少 field padding: 6px 8px 7px; 到 padding: 3px 8px 7px; 并增加 height: 32px ; 到 高度: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">