html - Bootstrap HTML 选择下拉选项在 IE 7 与 IE8 中不对齐

Question

我希望有人能在这里帮助我，我已经尝试解决这个问题好几个小时了。

我有一个 bootstrap 3.0 水平形式，这是 HTML 代码:

<div class="form-group">
    <div class="col-md-5">
        <label class="control-label">First Name</label>
        <input type="text" value="Test" name="first_name" class="form-control other">
    </div>
    <div class="col-md-5">
        <label class="control-label">Last Name</label>
        <input type="text" value="Test" name="last_name" class="form-control other">
    </div>
</div>
<div class="form-group">
    <div class="col-md-3">
        <label class="control-label">Gender</label>
        <select name="gender" class="form-control beta">
            <option value="m">male</option>
            <option value="f">female</option>
        </select>
    </div>
</div>

这是我的 IE 7 和 IE 8 CC 代码:

.other {
    background-color: #f4f4f4;
    height: 30px;
    font-size: 12px;
    border: none;
    padding: 0;
    margin: 0;
}

.form-control {
    height: 30px;
    line-height: 30px;
    padding: 0;
}

select {
    height: 30px;
    padding: 0 !important;
    margin: 0;
    line-height: 30px;
}

label {
    color: #4F959A;
    padding: 0;
    margin: 0;
}

我有一个屏幕截图要在 IE 7 和 IE8 中显示

IE7:

IE8:

我希望 IE 7 看起来接近于 iE 8 的外观，即使您看到我在对齐“选择”下拉列表中的文本时遇到问题，它没有居中？

谢谢

Answer 1

在这种情况下，我喜欢使用 CSS hack。去here对于其中的大量列表。

如果我只想针对 IE8 及以下版本，我会执行如下操作:

.element {
  color: blue\9;
}

如果是 IE7 及以下版本，我将执行以下操作:

.element {
  *color: blue;
}

在您的情况下，您似乎需要使用 select 元素。你也许可以做一个 margin-left: -10px 或相对定位它并做一个 right 或 left:

.select {
  position: relative;
  right: 25px;
}