скрытое фоновое изображение в IE

Question

У меня есть кнопка редактирования, которая появляется на странице, когда пользователи имеют доступ к редактированию. Я реализовал это как ссылку:

<a class='editlink' href='edit.html'></a>

Мой соответствующий CSS отображает класс editlink в виде значка карандаша:

.editlink{
 background-image: url(../img/pencil.png);
 background-repeat:no-repeat;
 padding: 2px 8px;
}

Это прекрасно работает в Firefox, но не отображается в IE. Если я поставлю & NBSP; внутри тега <a> он показывает карандаш, но я надеялся оставить тег пустым. Могу ли я внести изменения в CSS, чтобы это исправить?

Answer 1

Это ошибка, связанная со свойством hasLayout в IE.

Попробуйте добавить

zoom:1;

к вашему стилю, и все должно работать нормально.

Answer 2

Вы можете установить ширину и высоту по ссылке в вашей таблице стилей.Это правильно отображает в FF, IE и Chrome: .editlink{ background-image: url(../img/pencil.png); background-repeat:no-repeat; padding: 2px 8px; <strong>width: 10px; height: 20px;</strong> }

Answer 3

Это довольно распространенная проблема в IE. Даже ячейки таблицы без содержимого фактически не отображаются или не отображаются в документе. Это очень нормально. Мой вам совет - оставить там место или сделать ссылку "display: block;" а затем используйте ширину и высоту, чтобы сделать его больше или меньше. У него есть свои проблемы, связанные с позиционированием, поскольку он больше не будет встроенным элементом.

Одной из надежных альтернатив будет взять ссылку и сделать с ней следующее:

<a class='editlink' href='edit.html'><img src="img/pencil.png"></a>

Это обеспечит правильное растяжение якоря во всех браузерах.