Проблема с CSS в IE7 и IE8 - текстовый отступ в поле

#css #internet-explorer-8

Вопрос:

Возможно ли заставить IE7 и IE8 учитывать свойство css text-indent в поле ввода?

Вот мой код

 <!DOCTYPE html>
<html>
<body>
        <input type="text" style="text-indent:100px; display:block;" value="Test indent" />
</body>
</html>

При первой загрузке страницы в IE8 текст без отступа. Вы можете «активировать» свойство отступа текста, сосредоточившись на текстовом поле и введя в него текст (т. Е. вызвать событие onchange).

Как мне заставить IE7 и IE8 учитывать отступ текста входного текстового элемента при загрузке страницы, а не при событии input.onchange?

1. зачем вам это нужно? Возможно, есть другой способ.

2. обычно я бы использовал отступ слева или margin-left … но из-за чего-то еще, что я делаю, мне придется полагаться на текстовый отступ

3. не рекомендуется использовать что-либо, выходящее за рамки его намерений. Как сказал @gelogenic ниже, text-indent предназначен для отступа первой строки. inline Элемент (такой как input ) не обязательно будет учитывать это, если это не первый элемент в абзаце.

4. это поле ввода должно содержать только одну строку. Если бы я хотел многострочный, я бы использовал textarea

5. в этом случае input поле ничем не отличается от span . <p>This is a <input type="text" value="test"/></p> это (вероятно) одна строка текста. "test" это не его собственные строки, если input это display: block; является textarea элементом является block level элемент (например, p тег).

Ответ №1:

в обычном случае текстовый отступ тега ввода не работает в ie6 и ie7, если мы добавим высоту строки: 1px, он будет работать во всех браузерах

Текстовый отступ будет работать во всех браузерах

 <input type="text" style="text-indent:-100px; display:block; line-height:1px;" value="Test indent" />

Текстовый отступ не будет работать в браузерах ie7 и ie6

 <input type="text" style="text-indent:-100px; display:block;" value="Test indent" />

ДЕМОНСТРАЦИЯ

http://jsfiddle.net/KczMR/1/

Ответ №2:

Вы уверены, что хотите использовать «текстовый отступ» вместо свойства «margin-left» или «padding-left»? Свойство ‘text-indent’ предназначено для изменения только первой строки текста в элементе. Возможно, вам больше повезет с полями или заполнением.