html - Display Table Cell inconsistency. -
hey wondering why happens:
the buttons not fill container yet anchors do. fundamentally different between 2 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; }
i suppose fundamental difference between these elements <button>
treated replaced element (at least browsers), , rendered of non-css browser built-in mechanisms. there several issues in bugzilla rendering limitations of buttons caused (e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=733914).
ie9+ , opera seem not treat <button>
replaced element, seems more correct according latest html spec, still rather unclear in css.
Comments
Post a Comment