The inconsistency of the display table cell.

Question

Hey, I was wondering why this is happening:

http://jsfiddle.net/dSVGF/

Buttons do not fill the container, but the anchors do. What is fundamentally different between the two tags stylistically?

<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

I believe that the fundamental difference between these elements is that <button> seen as a substituted element (at least by some browsers) and rendered using built-in browser mechanisms other than CSS. Bugzilla has a few questions about the restrictions on removing buttons caused by this (e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=733914 ).

IE9 + and Opera do not seem to consider <button> be a replaced element that seems more correct according to the latest HTML specification , but is still pretty fuzzy in CSS.

Answer 2

Whether the button tag really accepts "display: table-cell" depends on the browser. I quickly checked the Chrome Developer Tools: in the computed styles, a built-in block was installed on the buttons. When I tried the same thing in IE10, it accepted the change, and the buttons were actually the size of the table cells.

Answer 3

A button is an element that can be clicked, which allows you to put something in text, image, etc.

An anchor tag is specific to hyperlinks.

Source: w3schools.com