我希望有人能在这里帮助我,我已经尝试解决这个问题好几个小时了。
我有一个 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 的外观,即使您看到我在对齐“选择”下拉列表中的文本时遇到问题,它没有居中?
谢谢
最佳答案
在这种情况下,我喜欢使用 CSS hack。去here对于其中的大量列表。
如果我只想针对 IE8 及以下版本,我会执行如下操作:
.element {
color: blue\9;
}
如果是 IE7 及以下版本,我将执行以下操作:
.element {
*color: blue;
}
在您的情况下,您似乎需要使用 select
元素。你也许可以做一个 margin-left: -10px
或相对定位它并做一个 right
或 left
:
.select {
position: relative;
right: 25px;
}
关于html - Bootstrap HTML 选择下拉选项在 IE 7 与 IE8 中不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23838560/