Смещение фонa у input в IE6 и 7

14 12/09
23

Зачастую многие дизайнеры в своих работах используют отличные от стандартных элементы форм. К сожалению, в процессе вёрстки подобных элементов иногда возникают те или иные трудности. Например, Dimox недавно поднял вопрос вертикального выравнивания у кнопок в FF.

Я же хочу обратить ваше внимание на баг, который присутствует в IE6, 7 у текстовых полей с фоновым изображением.

1

<input type="text" />
1
2
3
4
5
6
7
8

input{
   width:200px;
   height:19px;
   padding:8px 10px;
   border:none;
   background:url(images/input-bg.png) no-repeat left top;
   font:1em Arial,Helvetica,sans-serif
}

В том случае, если введенный текст превышает ширину элемента, фоновое изображение в IE6, 7 начинает смещаться.

Смещение фона у полей ввода текста в IE6 и 7

Использование background-attachment: fixed работает только в IE6, в 7-ке проблема остаётся.

Можно указывать background-position: right bottom для фона. В этом случае изображение смещается в противоположную сторону, и смещения не видно, если не перемещать курсор обратно, в начало текста.

Наиболее универсальным способом является использование дополнительного элемента, например span, с необходимым фоном.

Жду ваших комментариев.

Теги: •

Баг с курсивным текстом в IE6

10 07/09
5

Проблема заключается в том, что при использовании курсивного начертания, IE6 увеличивает ширину блока с текстом, что может «поломать» структуру вёрстки.

Проблема известна достаточно давно, но возможно не все о ней знают. Баг подробно описан в этой статье.

Проблема проявляет себя достаточно хаотично. Слудующие условия в той или иной степени влияют на её появление:

  • на возникновение проблемы влияют: длина строки текста, содержание и шрифт (семейство, размер и т.д.);
  • несколько слов написанных курсивом (возможно, в середине текста);
  • наличие слова, написанного курсивом в начале или конце строки;
  • проблема проявляет себя тем чаще, чем больше курсивного текста;
  • проблема возникает ещё чаще, если курсивный текст выровнен по ширине (text-align:justify);
  • проблема проявляеться независимо от того каким образом получен курсивный текст (используеться ли элемент em или span с text-style:italic);

Решается, путём добавления блоку с текстом, hasLayout и overflow:visible:

1
2
3
4

.element{
  height:1%;
  overflow:visible
}
Теги: •