firefox 3.x не поддерживает фоновые изображения в псевдоклассах?

#css #firefox

Вопрос:

Ошибка в том, что Firefox, похоже, не поддерживает замену фоновых изображений в псевдоклассах, или другие браузеры делают больше, чем должны?

Я пытаюсь выяснить, делаю ли я что-то не так… это работает в Opera и Chrome (еще не тестировалось в IE)…

 .myClass{
  background-image:url('off.jpg');
}

.myClass:hover{
  background-image:url('on.jpg');
}

Однако firefox просто игнорирует это. Я надеялся избежать написания опрокидывания javascript… это казалось таким элегантным решением, но я начинаю подозревать, что меня поливают из шланга.

1. Firefox всегда поддерживал это. Возможно, попробуйте очистить кеш и перезагрузить страницу. Если это все еще не работает, нам нужно просмотреть больше кода.

2. Я не знаю, решает это или нет. Но иногда FF вызывает у меня проблемы с фоном, когда я пропускаю установку повтора bg. Попробуйте добавить некоторые атрибуты, no-repeat, repeat-x, repeat-y. Кроме того, попробуйте расположить свое изображение вверху слева и т. Д… Что вам нужно, возможно, это решит вашу проблему. Звучит смешно, но это так.

Ответ №1:

Предположительно, ваша страница находится в режиме quirks и :hover имеет какое-то странное поведение с точки зрения того, когда она применяется или нет в режиме quirks. Я предлагаю перевести вашу веб-страницу в стандартный режим, если вы хотите, чтобы браузеры действительно вели себя на ней совместимо, вместо того, чтобы явно запрашивать у них поведение, совместимое с ошибками.

1. вау… Я никогда даже не слышал о режиме quirks! Удивительные… добавление <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//RU» » w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd «> в верхней части документа это полностью исправлено! Спасибо!

2. Вероятно, достаточно просто поместить <!DOCTYPE html> туда (который также является HTML5 «doctype»).

Ответ №2:

Какую версию FF вы используете? Быстрый поиск выявил эту возможную проблему, похожую на вашу: http://support.mozilla.com/en-US/questions/746770

Попробуйте это, чтобы увидеть, работает ли это:

 .myClass{
  background-image:url('off.jpg');
}

.myClass:hover{
  background-image:url('on.jpg');
}

[class="myClass"]:hover{  /* firefox fix */
  background-image:url('on.jpg');
}

1. Я в 3.6.13, я должен был начать с этого, извините. Приведенное выше решение, похоже, не делает ничего полезного в моей версии.

2. Я только что скачал последнюю версию FF, и она работает нормально, так что это специфическая ошибка 3.x… Боже, как я ненавижу несовместимость браузеров!!! :/