Question

给出以下代码：

<form>
  <input type="text">
  <select>
    <option>Foobar</option>
  </select>
</form>

使用以下CSS：

input, select {
  width: 200px;
}

Internet Explorer显示的文本输入略大于选择框。有没有办法（希望不破坏与其他浏览器的兼容性）使它们具有完全相同的宽度？

谢谢，

gnuvince

Answer 1

使用条件评论：

<style type="text/css">
input, select {
    width: 200px;
}
</style>
<!--[if IE]>
    <style type="text/css">
    select {
        width: 195px; /* Resize down hwever much is needed to make them even. */
    }
    </style>
<![endif]-->

More on Conditional Comments

Answer 2

box-sizing: border-box怎么样？

Answer 3

检测IE时，您必须手动执行此操作

input, select {
  width: 200px;
}

.ie-select {
  width: 220px;
}

Answer 4

input {
    width: 200px;
}
select { /* for IE */
    width: 206px;
}
html > /**/ body 
select { /* for other browsers */
    width: 204px;
}

或者：CSS: how to set the width of form control so they all have the same width?

在Internet Explorer中，输入字段比选择框长几个像素;我怎样才能让它们长度相同？

4 个答案: