显示表单元格不一致。 [英] Display Table Cell inconsistency.

问题描述

嘿，我想知道为什么会发生这种情况：

Hey I was wondering why this happens:

http://jsfiddle.net / dSVGF /

这些按钮不填充容器，
锚点不会。这两个标签之间的根本不同是什么？

The buttons do not fill the container yet 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;
}

推荐答案

这些元素之间的区别在于< button> 被视为替换元素（至少由某些浏览器），并且借助非CSS浏览器内置机制。 Bugzilla存在几个问题，即由此引起的按钮的呈现限制（例如 https：// bugbilla.mozilla.org/show_bug.cgi?id=733914 ）。

I suppose that the fundamental difference between these elements is that <button> is treated as replaced element (at least by some browsers), and is rendered with the help of non-CSS browser built-in mechanisms. There are several issues in Bugzilla about the rendering limitations of buttons caused by this (e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=733914).

IE9 +和Opera似乎不处理< button> ; 作为替换的元素，根据最新的 HTML spec ，但在CSS中仍然不清楚。

IE9+ and Opera seem not to treat <button> as a replaced element, which seems more correct according to the latest HTML spec, but is still rather unclear in CSS.

这篇关于显示表单元格不一致。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！