В Internet Explorer поля ввода на несколько пикселей длиннее полей выбора; как я могу сделать их одинаковой длины?

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]-->

Подробнее об условных комментариях

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: как установить ширину элемента управления формы, чтобы они все имели одинаковую ширину?