2013-05-08 11 views
6

Hey, ich habe mich gefragt, warum dies geschieht:Anzeige der Zellinkonsistenz der Tabelle.

http://jsfiddle.net/dSVGF/

Die Tasten nicht füllen die Behälter noch die Anker tun. Was unterscheidet sich grundlegend zwischen den beiden Tags stilistisch?

<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; 
} 
+0

Ich kann es nicht herausfinden, entweder :) Ich bin auch neugierig! Interessanter – Jondlm

+0

Mehr: http://jsfiddle.net/dSVGF/2/ :) – Passerby

+1

@Passerby, die Regel ".table> *" gilt nur für unmittelbare Kinder, so theoretisch, die div (aber nicht seine verschachtelte Taste, A) Für diese Regel sollten die Schaltfläche B und die Spanne (wiederum nicht ihre geschachtelte Schaltfläche) gelten. Da das button-Tag in einigen Browsern "display: table-cell" nicht zulässt, wird hier der Button "B" ausgelassen. – BDawg

Antwort

4

Ich nehme an, dass der grundlegende Unterschied zwischen diesen Elementen ist, dass <button> als ersetztes Element behandelt wird (zumindest von einigen Browsern), und mit Hilfe von nicht-CSS-Browser eingebauten Mechanismen gerendert wird. In Bugzilla gibt es einige Probleme bezüglich der Rendering-Einschränkungen von Schaltflächen, die dadurch verursacht werden (z. B. https://bugzilla.mozilla.org/show_bug.cgi?id=733914).

IE9 + und Opera scheinen nicht <button> als ersetztes Element zu behandeln, das nach dem letzten HTML spec korrekter erscheint, ist aber in CSS noch ziemlich unklar.

-2

Eine Schaltfläche ist eine anklickbare Element, das Sie innerhalb wie Text setzen alles erlaubt, Bild usw.

Ein Anker-Tag ist für Hyperlinks spezifisch.

Quelle: w3schools.com

+0

-1 für die Verwendung der völlig unzuverlässigen W3-Schulen. – Sparky

+0

Ich denke, das ist eine CSS-Frage mehr als eine HTML-Frage. Möglicherweise im Browser-Stylesheet, aber keine Eigenschaften im Inspektor scheinen dies zu beeinflussen. – Jeffpowrs

1

Ob eine Ohrenmarke akzeptiert tatsächlich "display: table-cell" ist auf dem Browser abhängig, offenbar. Ich habe die Chrome-Entwicklertools schnell überprüft: In den berechneten Stilen wurde die Anzeige auf den Schaltflächen auf Inline-Block gesetzt. Als ich das gleiche in IE10 versuchte, akzeptierte es die Änderung und die tatsächlich als Tabellenzellen bemessenen Schaltflächen.

Verwandte Themen