De nombreux formulaires de recherche proposent des champs <input> graphiques, stylés à l'aide d'images d'arrière-plan (background-image).

Par un malheureux hasard, Internet Explorer (jusqu'à sa version 7) présente un bug d'affichage assez curieux : lorsque le terme introduit dans le champ input est très long et dépasse la largeur de l'élément, l'arrière-plan scrolle (défile) en même temps que du texte est ajouté.

L'image de fond de l'élément est donc progressivement poussée vers la gauche, ce qui est assez fâcheux visuellement. Voici l'exemple concret de la recherche sur Alsacréations :

Quand le terme recherché est suffisamment court, tout va bien :

Dès que le terme cherché est plus long que le champ, l'arrière-plan est poussé :

Les styles appliqués à cet élément input sont ceux-ci :

#sous-menu form #recherche-texte {
  width: 151px;
  height: 22px;
  padding: 5px 0 0 25px;
  background:  url(img/input-search.png) left top no-repeat;
  border: none;
  margin: 0;
  vertical-align: top;
  color: #aaa;
}

Pour corriger de façon efficace ce bug d'affichage sur Internet Explorer, il suffit tout simplement de positionner l'image d'arrière-plan à droite de l'élément input :

#sous-menu form #recherche-texte {
  background:  url(img/input-search.png) right top no-repeat;
}

Et voilà !

Alternatives :

Une autre béquille consiste à appliquer la règle background-attachment : fixed sur le champ, mais cette solution ne corrigera le défaut que sur les navigateurs IE6 et inférieur.

Il est également envisageable de placer l'élément input dans un autre conteneur (ex : div) qui afficherait lui-même l'image de fond, et d'assigner background-color:transparent au champ input.