html - Bootstrap 输入和选择 padding-left 跨浏览器问题

Question

我正在使用 Bootstrap 3，我希望填充输入和选择字段左对齐。 在我的表单中，我以这种方式覆盖了 bootstrap form-group-lg

    .form-group-lg .form-control {
       letter-spacing: normal;
       text-indent: 0.25em;
       border-radius: 2px;
       color: #555555;
       font-size: 14px;
       line-height: 1.42857;
       min-height: 38px;
       height: 58px;
    }
    .form-group-lg select.form-control {
       height: 58px;
       line-height: 58px;
       padding-left 9px; /* force alignament with firefox, fail in IE e Chrome */
    }

    <div class="row">
      <div class="col-md-12">
        <div class="form-group form-group-lg">
          <input class="form-control" name="name" placeholder="Name" type="text">
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group form-group-lg">
          <select class="form-control" name="City" required="">
            <option>City</option>
          </select>
        </div>
      </div>
    </div>

不幸的是，我注意到如果我尝试强制选择字段中的 padding-left 与输入字段的对齐，则在每个浏览器中的显示方式都不同。

查看不同浏览器的例子 EXAMPLE

这个问题有什么解决办法吗？

Answer 1

使用 text-indent 属性而不是 padding-left(它将适用于所有浏览器(在 chrome 和 firefox 上测试)):

看你的例子:

/* CSS used here will be applied after bootstrap.css */

.container {
  width: 300px;
  margin-top: 40px;
}
.form-group-lg .form-control {
  /*padding: 10px 16px;*/
  letter-spacing: normal;
  text-indent: 0.25em;
  border-radius: 2px;
  color: #555555;
  font-size: 14px;
  line-height: 1.42857;
  min-height: 38px;
  height: 58px;
}
.form-group-lg select.form-control {
  height: 58px;
  line-height: 58px;
  text-indent: 29px; // use this instead of padding-left
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group form-group-lg">
        <input class="form-control" name="name" placeholder="Name" type="text">
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group form-group-lg">
        <select class="form-control" name="City" required="">
          <option>City</option>
        </select>
      </div>
    </div>
  </div>
</div>