嘿,我想知道为什么会这样:
按钮没有填满容器了 锚点。根本不同的是什么 两个标签之间的风格?
<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;
}
答案 0 :(得分:4)
我认为这些元素之间的根本区别在于<button>
被视为替换元素(至少是某些浏览器),并且在非CSS浏览器内置机制的帮助下呈现。 Bugzilla中存在一些关于由此引起的按钮渲染限制的问题(例如https://bugzilla.mozilla.org/show_bug.cgi?id=733914)。
IE9 +和Opera似乎不会将<button>
视为替换元素,根据最新的HTML spec,这似乎更正确,但在CSS中仍然不太清楚。
答案 1 :(得分:1)
按钮标签是否实际上接受“display:table-cell”显然取决于浏览器。我对Chrome开发人员工具进行了快速检查:在计算出的样式中,按钮上的显示设置为内联块。当我在IE10中尝试相同的操作时,它接受了更改,并且按钮的大小实际上是表格单元格。
答案 2 :(得分:-2)
按钮是一个可点击的元素,允许您放置任何内容,如文本,图像等。
锚标记特定于超链接。
资料来源:w3schools.com