CSS Sprite Button С помощью float: left ... Не центрироваться внутри таблицы в Firefox

Question

Удивительно ... что-то, что я получил для работы в IE, а не в Firefox! Совсем черед событий, а?

В любом случае, вот в чем проблема. Проверьте следующую страницу в IE и Firefox:

http://www.lolstrategies.com/test/button_sample.html

Я использую этот файл, чтобы собрать кнопку.

(http://www.lolstrategies.com/test/composite__V153767378_.png)

Очевидно, эта кнопка сосредоточена только в IE ... что дает ?! Я использую диапазон для фона, который находится под текстом, и другой для подсказки, а затем плаваю их вместе с float: left, как вы можете видеть, просматривая источник.

Итак, что я могу сделать, чтобы центрировать этот промежуток в Firefox?

Заранее спасибо .. пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы по этому поводу, на которые я могу помочь ответить!

Answer 1

Ваш span.buttonLarge содержит два не очищенных плавающих элемента уровня блока, следовательно, нет центрирования.Чтобы это исправить, вы можете применить display: inline-block и margin: 0 auto к нему.

PS У вас не указано DOCTYPE, поэтому ваше текущее решение работает в IE - оно рендеритв режиме Причуд.

Answer 2

Удалить float: left; из .primaryLargeButtonSpan и .primaryLargeButtonEnd

после этого изменения display: block; на display: inline; с .spriteButton span.button_label ИЛИ измените его на display: inline-block;, а затем установите для свойства background значение url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;

Вы можете заметить некоторый "дефект" в конечном изображении, хотя ...