Элементы рендеринга Firefox неправильно (проблема аппаратного ускорения)

Я построил этот мастер, используя только CSS. Но это проблема в новых версиях Firefox. В Google Chrome и IE 9+ работает отлично. Проблема заключается в псевдоэлементах :after и :before

Вот изображение ошибки:

enter image description here

И вот картина того, как она работает в Chrome и должна работать в Firefox:

enter image description here

Скрипт с кодом: http://jsfiddle.net/2jZmr/1/

Обновление: Я видел, что проблема связана не только с версией Firefox, протестированной на двух разных компьютерах с той же версией Firefox (v28), а с одной, а другая - нет. Я переустановил Firefox на своей машине, и проблема не устранена. Я также тестировал его на Firefox в Android 4.4.2, и он работал нормально.

Update2: Когда я открываю firefox в режиме безопасности, ошибка не возникает. Но просто отключите все плагины, надстройки и темы не исправляют ошибку.

Update3: Я нашел причину ошибки. Проблема заключается в ускорении аппаратного обеспечения Firefox.

Я выполняю следующие действия:

  • В верхней части окна Firefox нажмите кнопку "Firefox", а затем выберите "Параметры"
  • Выберите вкладку "Дополнительно" и вкладку "Общие".
  • Снимите флажок Использовать аппаратное ускорение, если оно доступно.
  • В верхней части окна Firefox нажмите кнопку Firefox, затем выберите Exit
  • Запустите Firefox так, как обычно.

Но возможно ли изменить css или выполнить некоторый код через javascript для запуска в firefox с включенным аппаратным ускорением?

Альтернатива, которая будет следовать, если нет, будет использовать изображения вместо CSS3.

Изменить: Мой Firefox теперь находится в версии 32.0, и проблема продолжается.

Ответы

Ответ 1

У меня нет проблемы с моим FF, но вы можете попытаться удвоить ':' перед псевдоэлементом:

Иногда вы увидите двойные двоеточия (::) вместо одного (:). Это часть CSS3 и попытка различать псевдоклассы и псевдоэлементы. Большинство браузеров поддерживают оба значения.

Примечание: выбор всегда начинается с двойных двоеточий (::). Вы можете использовать только один псевдоэлемент в селекторе. Он должен появиться после простых селекторов в инструкции.

src: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Ответ 2

Обычный класс в CSS:

.myClass { 
    margin-top: 0px; 
}

Используйте этот CSS-хак для Firefox:

@-moz-document url-prefix() { 
    .myClass { 
         margin-top: -9px; 
    }  
}

Ответ 3

Я проверил ваш код и попытался запустить его в firefox, но проблема такая же, как вы сказали, затем добавьте

.wizard-steps li.active: after {border-left: 24px solid # 555; дисплей: блок; }

и он работает в моем браузере. Не могли бы вы проверить его?

Ответ 4

Зачем использовать до и после, когда вы можете использовать:

display: block;
margin: 0;
padding: 0;
float: left;

и прекратите использовать относительную позицию по умолчанию в большинстве случаев, разрушая отзывчивый или css-дизайн.

Постарайтесь разместить свои элементы в одном размере ширины div:.box {width: 100%; display: block; float: left;}

и расположите остальные элементы внутри div.box с поплавком: left; блок отображения; margin или padding left и width in% и посмотреть, что произойдет;)