Question

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

按钮没有填满容器了锚点。根本不同的是什么两个标签之间的风格？

<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

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

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

Answer 2

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

Answer 3

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

锚标记特定于超链接。

资料来源：w3schools.com

显示表格单元格不一致。

3 个答案: