Как да направим бутона за упътване за Firefox? - css, google-chrome, firefox, подложка

По някаква причина Firefox button елементите изглежда не уважават CSS padding декларации, дори ако ги направите display: block,

Вижте това JSFiddle в Chrome и Firefox: http://jsfiddle.net/DgeQ6/

Забележете как подложката работи в Chrome, но не и в Firefox. Как да накарам Firefox да обръща внимание padding в button елементи?

Ето една екранна снимка на това, как изглежда в Firefox на моята машина:

https://www.evernote.com/shard/s217/sh/dc349236-9a7e-46f2-ae77-3a7581fa78c1/ea90d1f4a880ba64257fdd744b9fabcf

Подложката трябва да бъде 20 пиксела, но не е засегната.

Отговори:

4 за отговор № 1

Кредитът трябва да отиде до Борис по-долу, но трябва да използвате -moz-appearance: никой да не замени стила на бутона на ниво OS. Тук е цигулка: http://jsfiddle.net/DgeQ6/8/,

HTML

<button class="btn-large">Hello</button>

CSS

.btn-large {
padding: 100px;
-moz-appearance: none;
}

Трябва също така да се отбележи, че Twitter Bootstrap изглежда, че постига същия ефект за бутоните си в Firefox, само като има "рамка на радиуса", заедно с подложка.


2 за отговор № 2

Самото подравняване не работи на Mac, защотоMac-тематичното търсене на бутони надминава подложката. На Windows работи например добре. Не мога да си спомня какво е поведението на Linux навън.

Най-безопасният начин да се справите с това е да поставите -moz-appearance: none ако искате да изпуснете тематичния външен вид.


0 за отговор № 3

въведете описанието на изображението тук

Това изглежда така в моя Firefox.


Свързани въпроси
Най - известен