html - Table-cell 元素在 Chrome 中的不同高度

Question

我对这个元素在 Chrome 中的显示方式与在 Safari 和 Firefox 中的显示方式不同感到非常困惑。

我有一个 <a>这应该与其 parent 的高度相匹配 <div> .它适用于 Safari 和 Firefox，但不适用于 Chrome。我无法手动设置高度，因为相同的代码用于页面上几个不同大小的元素。

与 <a> 明显相关的样式元素是:

display: table-cell;
width: 100%;
vertical-align: middle;
position: relative;

与 <div> 明显相关的样式元素是:

display: table;
width: 100%;
height: 100%;

但是，问题很可能来自其他一些代码，而我所了解的还不够多。

谢谢!

Answer 1

The apparently relevant styles for the element are: display: table-cell; width: 100%; vertical-align: middle; position: relative;

The apparently relevant styles for the element are: display: table; width: 100%; height: 100%;

尝试为链接添加 height:100%，并删除 position:relative。

height:100%，以便 a 元素与其父元素具有相同的高度(表格单元格不一定是这种情况，具体取决于浏览器)，以及移除position:relative，因为table-cell元素的相对定位有些问题，导致CSS 2.1规范未定义，部分浏览器厂商貌似意见不一关于 CSS 3 的澄清，或者在这方面实现 CSS 3 时仍然存在错误。