6

嘿，我想知道为什么会这样：

http://jsfiddle.net/dSVGF/

按钮不会填充容器，但锚点会填充。这两个标签在风格上有何根本不同？

<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;
}
4

3 回答 3

4

我想这些元素之间的根本区别在于<button>被视为替换元素（至少在某些浏览器中），并在非 CSS 浏览器内置机制的帮助下呈现。Bugzilla 中有几个关于由此引起的按钮渲染限制的问题（例如https://bugzilla.mozilla.org/show_bug.cgi?id=733914）。

IE9+ 和 Opera 似乎没有将<button>其视为替换元素，根据最新的HTML 规范，这似乎更正确，但在 CSS 中仍然很不清楚。

于 2013-07-08T09:04:26.407 回答
1

显然，按钮标签是否真正接受“显示：表格单元”取决于浏览器。我在 Chrome 开发人员工具中进行了快速检查：在计算的样式中，按钮上的显示设置为 inline-block。当我在 IE10 中尝试相同的操作时，它接受了更改并且按钮实际大小为表格单元格。

于 2013-07-08T08:23:48.060 回答
-2

按钮是一个可点击的元素，它允许您在其中放置任何内容，例如文本、图像等。

锚标记特定于超链接。

资料来源：w3schools.com

于 2013-05-13T20:10:22.793 回答