html - Display Table Cell inconsistency. -


hey wondering why happens:

http://jsfiddle.net/dsvgf/

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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -