Tablo Tablo Hücre tutarsızlığı.

Question

neden bu olur Hey merak ediyorum:

http://jsfiddle.net/dSVGF/

düğmeleri henüz çapalar yapmak kabını doldurmaz. Stilistik olarak iki etiket arasında temelde farklı nedir?

<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

Bu elemanlar arasındaki temel farkın, <button>'un değiştirilen öğe olarak (en azından bazı tarayıcılar tarafından) ele alınması ve CSS olmayan tarayıcı yerleşik mekanizmaların yardımıyla oluşturulması gerektiğine inanıyorum. Bugzilla'da bunun neden olduğu düğmelerin görüntülenme sınırlamaları hakkında birçok sorun vardır (ör. https://bugzilla.mozilla.org/show_bug.cgi?id=733914).

IE9 + ve Opera, <button> ürününü, değiştirilmiş bir öğe olarak görmüyor gibi görünüyor, bu da en son HTML spec numaralı telefona göre daha doğru görünüyor, ancak CSS modelinde henüz açık değil.

Answer 2

bir düğme vb metin, resim

bir bağlantı etiketi Köprüler için özeldir gibi içinde bir şey koymak sağlayan bir tıklanabilir unsurdur.

Kaynak: Bir düğme etiketi aslında kabul olsun ya da olmasın

Answer 3

w3schools.com "display: table hücreli" görünüşe göre, tarayıcıda bağlıdır. Chrome geliştirici araçlarında hızlı bir kontrol gerçekleştirdim: Hesaplanan stillerde, düğmelerdeki ekran satır içi bloğa ayarlandı. IE10'da da aynısını denediğimde, değişimi ve gerçekten masa hücresi olarak boyutlandırılmış düğmeleri kabul etti.