显示表格单元格不一致。

时间:2013-05-08 21:43:58

标签: html css

嘿,我想知道为什么会这样:

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

3 个答案:

答案 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