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

#css #internet-explorer-9 #sprite #css-sprites

#css #internet-explorer-9 #спрайт #css-спрайты

Вопрос:

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

Вот CSS — мое изображение имеет высоту 31 пиксель:

 a
{
    background-position: 0 0;
}

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

При наведении курсора фон выглядит нормально во всех браузерах, кроме ie9, где он выглядит слегка размытым и, кажется, сдвигается на один пиксель вверх (- 30 пикселей).

1. Может быть связано: optimiced.com/en/2011/03/17/ie9-background-shifting-bug

2. Если ошибка такая же чертовски странная , как та, на которую ссылается @keyboardP, тестовый пример действительно помог бы. Попробуйте создать его с помощью JS Bin / http://dummyimage.com / .

Ответ №1:

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

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

высота: y пикселей; ширина: x пикселей;

Наиболее распространенной причиной размытых изображений является плохое масштабирование в браузере, убедитесь, что изображение имеет правильный размер по умолчанию, чтобы браузер не пытался его масштабировать. Также используйте свой инспектор элементов в chrome, safari или Firefox, чтобы проверить, изменяет ли другая часть css размер фона или высоту / ширину div.

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

1. Это было что-то о том, как ie9 справляется с наведением якоря. Я добавил div в привязку и вместо этого оформил div, и это работает как шарм.

2. Как я уже сказал, прямое оформление привязки никогда не работает хорошо. :/

3. У меня аналогичная проблема. Я использовал решение выше (обертывание div с изображением BG в тегах привязки — но я немного смущен тем, как тогда будет работать функция наведения?

4. a: наведите курсор > img {граница: сплошная красная на 1 пиксель}. При наведении курсора на якорь изображение с красной рамкой (просто пример). Измените стиль красной рамки на что угодно.

Ответ №2:

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