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;增加到height: 35px;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

IE9在输入中裁剪文本

1 个答案: