Dlaczego HTML <buttons> jest zgodny ze starym modelem skrzynki IE5 we wszystkich nowoczesnych przeglądarkach?

Question

Miałem dziwny problem z przyciskiem i trochę CSS, zauważyłem, że zachowywał się tak, jakby był zgodny ze starym modelem skrzynek IE5, gdzie wysokość = wysokość + dopełnienie.

Po pewnym przeglądania natknąłem this article która potwierdziła moje założenia, ale nie wyjaśnił, dlaczego tak jest.

Czy ktoś wie dlaczego wszystkich nowoczesnych przeglądarkach (Firefox, Chrome, IE9) traktować elementy Przycisk jak to? I czy ktoś wie o obejściu, aby elementy przycisków używały modelu pudełkowego, który (o ile wiem) kiedykolwiek używa inny element w tych przeglądarkach?

Answer 1

nigdy nawet sobie sprawę, że przyciski działają w ten sposób, ale ogólnie nie używać elementów wejściowych i zdecydować się na modzie div odpowiedników, ponieważ są one znacznie łatwiejsze do stylu i sprawiają, wyglądają tak samo we wszystkich przeglądarkach.

obejście aby skalować przyciski jak elementy div mogłoby być ustawiony atrybut box-sizing do content-box, która jest wartością domyślną dla div:

button, input[type=button], input[type=submit] 
{ 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
} 

Here's an example on JSFiddle.

Answer 2

<button> jest uważany jako znacznik inline, to naturalnie nie korzysta z W3C model blokowy.

To jest czysto logiczne, ale zgadzam się, całkowicie niepokojące. Chodzi teraz o to, dlaczego nie jest to uważane za tag blokowy?

button { 
 
    width: 100px; 
 
    padding: 0 30px; 
 
} 
 

 
#a { display: inline; } 
 
#b { display: block; } 
 
#c { display: inline; box-sizing: content-box; } 
 
#d { display: block; box-sizing: content-box; }

<button id="a">aaa</button> 
 
<button id="b">bbb</button> 
 
<button id="c">ccc</button> 
 
<button id="d">ddd</button>

Answer 3

Najśmieszniejsze o tym pytaniem w tej chwili jest, że kilka osób z wyższej półki w społeczności JS/CSS zaczęła używać bardzo kompatybilną wersję tego modelu pudełkowego w swoich projektach produkcyjnych.

box-sizing : border-box uczyni większość nowoczesnych przeglądarek zachowują się jak wejść.
Patrz: Paul Irish - Border-Box FTW

Bezpośrednią korzyścią jest w stanie wyrównać wszystko się znacznie szybciej, bez konieczności grania z marginesów ujemnych, chyba że rzeczywiście zamierza zrobić nakładki z-index nie- fixed/nie- absolute elementów pozycjonowanych .