Заполнение внутри текстового поля не отображается правильно в Internet Explorer - PullRequest
Новая
       21

Заполнение внутри текстового поля не отображается правильно в Internet Explorer

0 голосов
/ 26 января 2012

У меня есть страница на --- ссылка удалена сейчас ---

Вы можете проверить это в FF и IE (у меня IE 9).В нем вы можете видеть, что поле поиска в правом верхнем углу имеет отступ (слева: 32 пикселя и справа: 72 пикселя).Заполнение работает правильно в FF и Chrome, но не в IE.

В чем может быть причина.

Код окна поиска - 

<form action="">
    <input type="text" name="search" id="search" />
    <input type="submit" id="button" value="" />
    </form>

CSS: 

#search {
    background:url(images/searchlens.jpg) no-repeat 0 0;
    float:right;
    width: 286px;
    height:40px;
    border:none;
    padding-left: 32px;
    padding-right:72px; 
}

1 Ответ

0 голосов
/ 26 января 2012

Я думаю, вы имеете в виду, что когда в поле достаточно текста, правый отступ не применяется, и по мере ввода большего количества текста, даже левый отступ исчезает.Это можно заметить в следующем простом документе: 

<!doctype html>
<title>input padding</title>
<style>
#search {
    padding-left: 32px;
    padding-right: 72px;
    width: 286px;
}
</style>
<input id=search value=
"Hello cruel world of Internet Explorer, why don't I get padded as specified?">

Если в поле введено больше символов, даже левый отступ пропадает.

Кажется, что нет хорошего решенияк этой странности.В ответах на вопрос заполнение текстового ввода в IE… возможно? было предложено несколько исправлений, и они, вероятно, помогают в некоторых случаях, но не в моих тестах.

Так что я бы предложил обойтипроблема заключается в том, что элемент input оборачивается внутри элемента div и задается фон и отступ для элемента div, так что блок input внутри него в основном не имеет стиля и вся прокрутка происходит внутри него.

...