Incoerenza cella tabella di visualizzazione.

Question

Hey mi chiedevo perché questo accade:

http://jsfiddle.net/dSVGF/

I pulsanti non riempire il contenitore ancora le ancore fanno. Che cosa è fondamentalmente diverso tra i due tag stilisticamente?

<div class="table"> 
    <a href="#">A</a> 
    <a href="#">B</a> 
    <a href="#">C</a> 
</div> 

<div class="table"> 
    <button href="#">A</button> 
    <button href="#">B</button> 
    <button href="#">C</button> 
</div> 


.table { 
    display: table; 
    width: 100%; 
    outline: 1px solid red; 
} 

.table > * { 
    display: table-cell; 
    outline: 1px solid lightgreen; 
} 

Answer 1

Suppongo che la differenza fondamentale tra questi elementi sia che <button> viene considerato come elemento sostituito (almeno da alcuni browser) ed è reso con l'aiuto di meccanismi incorporati del browser non CSS. Ci sono diversi problemi in Bugzilla riguardo ai limiti di rendering dei pulsanti causati da questo (ad esempio https://bugzilla.mozilla.org/show_bug.cgi?id=733914).

IE9 + e Opera sembrano non trattare <button> come un elemento sostituito, che sembra più corretto secondo l'ultimo HTML spec, ma è ancora piuttosto poco chiaro in CSS.

Answer 2

Un pulsante è un elemento cliccabile che permette di mettere qualsiasi cosa all'interno, come testo, immagini ecc

un tag di ancoraggio è specifico per i collegamenti ipertestuali.

Fonte: w3schools.com

Answer 3

o meno un tag tasto effettivamente accetta "display: table-cell" dipende dal browser, a quanto pare. Ho eseguito un rapido controllo negli strumenti di sviluppo di Chrome: negli stili calcolati, la visualizzazione sui pulsanti era impostata su blocco in linea. Quando ho provato lo stesso in IE10, ha accettato la modifica e i pulsanti effettivamente dimensionati come celle di tabella.