Button kontra przeglądarki

Ku pamięci:

  • Firefox¹ ignoruje line-height.

  • Firefox¹ dodaje własny element z dwupikselowym paddingiem i pikselowym borderem:

    button::-moz-focus-inner {
        border: 0 none;
        padding: 0;
    }
  • Wszystkie przeglądarki domyślnie wliczają ramki i padding do rozmiarów elementu:

    button {
        box-sizing: content-box;
        -moz-box-sizing: content-box;
        -ms-box-sizing: content-box;
        -webkit-box-sizing: content-box;
    }
  • IE7 i starsze nie radzą sobie z automatyczną szerokością przycisków:

    button {
        overflow: visible;
        width: 0;
    }
    button[type] {
        width: auto;
    }

¹ Dotyczy ogólnie produktów Mozilli.

6 myśli nt. „Button kontra przeglądarki

  1. Pingback: Przyciski w przeglądarkach

  2. W trzecim punkcie vendor prefiksy powinny być przed standardową właściwością.

    Jakieś to częste ostatnio ;)

  3. Na jaką przyszłość? Spodziewasz się, że któregoś dnia po zatwierdzeniu standardu te same nazwy powrócą w wersji z prefiksami? To byłoby wbrew zasadzie zachowywania wstecznej zgodności w CSS.

  4. Do IE polecam też dodać white-space:nowrap; bo gdy button ma kilkuwyrazową wartość, to każdy z wyrazów jest w osobnej linii, co oczywiście rozsypuje takowego :)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>