Ошибка CSS в поле ввода текста - MSIE7

Question

У меня есть входной текст в форме, которая имеет проблемы в MSIE7. Когда текстовое поле заполнено и я продолжаю печатать, фон начинает прокручиваться влево вместе с текстом.

Это форма, когда текстовое поле заполнено

Фоновое изображение, белый прямоугольник с закругленными углами, свитки слева с текстом, оставляя черный фон.

Это CSS для этого текстового поля:

  border: none;
  background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat; 
  width: 100px; 
  height: 20px; 
  padding: 0px; 
  font-size: 80%;  
  color: #399;  
  display:inline;

Есть ли способ решить эту проблему в MSIE7?

Answer 1

Я думаю, у вас проблема с этой строкой.

background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat;

Разве вы не имеете в виду

`background: url('/wp-content/themes/pokerbuddy/images/field.png') top left repeat-x;`

Answer 2

Да, есть способ решить эту проблему, но это немного болезненно. Вы не должны помещать текстовое поле в тот же div с фоновым изображением. Это должно быть примерно так (пример структуры HTML):

<div style="background-image: url('/wp-content/themes/pokerbuddy/images/field.png');>

<div class="textboxStylesHere" style="(specify width, maybe overflow hidden)">
</div>

</div>

Больно, но это работает.

Answer 3

input{overflow:hidden;}

Не знаю, сработает ли это.