IE9 рендеринг спрайта при наведении изображения 1px выкл / размыто

Question

Я использую спрайт с изображением моей кнопки и парящим изображением (немного темнее).

Вот CSS - мое изображение высотой 31px:

a
{
    background-position: 0 0;
}

a:hover
{
    background-position: 0 -31px;
}

КогдаЯ намекаю, что фон выглядит хорошо во всех браузерах, но ie9, где он выглядит слегка размытым и кажется смещенным вверх на один пиксель (-30px).

Answer 1

еще одна вещь, на которую следует обратить внимание, это убедиться, что ваш уровень масштабирования не что иное, как 100%. Я не могу сосчитать, сколько раз я случайно нажимал ctrl + колесико мыши, немного увеличивая уровень масштабирования до 105%.

Answer 2

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

Кроме того, масштабируется ли изображение вообще?Откройте ваше изображение в графическом редакторе и убедитесь, что это ТОЧНО ширина и высота, которую вы хотите, сохраните ее и для вашего div,

height: y px;ширина: x px;

Самая распространенная причина размытых изображений - плохое масштабирование в браузере. Убедитесь, что изображение имеет правильный размер по умолчанию, чтобы браузер не пытался масштабировать его.Также используйте ваш инспектор элементов в Chrome, Safari или Firefox, чтобы проверить, изменяет ли другой бит CSS фон или высоту / ширину div.

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