Проблемы со стилем CSS при вводе в IE8

Question

У меня проблема с отображением текста на входе в Internet Explorer 8. В Firefox, Safari и Chrome все отображается одинаково.

Firefox, Safari и Chrome

Internet Explorer 8

    <form action="" method="get">
       <input id="q" name="q" type="text">
       <input id="s" name="s" type="submit" value="Sök">
    </form>

#q {
    background:url(../../image_layout/search_field.png) no-repeat;
    width:209px;
    height:32px;
    padding:0 5px 0 5px;
    text-align:left;
    margin:0;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#09305b;
    font-weight:bold;
    position:absolute;
    left: 0px;
    top: 19px;
}
#s {
    background:url(../../image_layout/serach_buttom.png) no-repeat;
    width:56px;
    height:34px;
    padding:0;
    margin:0;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    border:0;
    position:absolute;
    left: 225px;
    top: 17px;
}

Answer 1

Попробуйте указать line-height: 34px или около того.

Answer 2

Существует правило CSS3 : box-sizing.Это правило поддерживается IE8.

IE (включая IE8) имеют нестандартную блочную модель, где padding и border включены в width и height, тогда как другие браузеры идут со стандартными не включать отступы и границы в ширину.Это подробно описано здесь .
Устанавливая box-sizing в content-box, вы говорите браузерам не включать ширину и отступы в ширину, а если вы установите box-sizing: border-box, все браузеры будутвключить границы и отступы в ширину.Так или иначе, отображение будет одинаковым во всех современных браузерах (не то, чтобы IE8 был таким современным, но он также поддерживает это правило:).

Answer 3

Мне нужно было установить высоту строки и display: inline. Не знаю почему, но у меня это сработало.

Answer 4

Попробуйте установить таргетинг на высоту строки для IE8 и ниже, например:

line-height: 32px\9;

line-height значение должно быть равно высоте ввода, а \9 будет нацелено на IE8 и ниже.

Answer 5

Установить свойство высоты строки для поля ввода поиска #q?

Answer 6

Позиция ввода должна быть position:absolute;, чтобы line-height:37px; и display:inline; работали.

Answer 7

Я пока не могу комментировать, ответ Мэтью работал на меня, но в случае, если люди хотели обертку только для IE, не ища где-либо еще:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    line-height: 20px;
}

Answer 8

Просто используйте

line-height: 34px!important;
height: 34px;

Answer 9

У меня было много проблем с этим, и наконец я решил это:

например Вы установили

  INPUT {
   line-height: 44px
}

и ...

  INPUT:focus {
    line-height: 45px
 }

этот ... f ... пиксель имеет значение (фокус должен иметь + 1px больше, чем обычно), и теперь ваш курсор находится в хорошем положении в IE8.