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

У меня возникла проблема с получением текста на входе, чтобы он отображался корректно в 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;
}

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

Задайте свойство высоты строки для поля ввода поиска #q?

Ответ 5

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

line-height: 32px\9;

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

Ответ 6

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

Ответ 7

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

для ex. вы устанавливаете

  INPUT {
   line-height: 44px
}

и...

  INPUT:focus {
    line-height: 45px
 }

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

Ответ 8

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

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

Ответ 9

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

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