Table-cell <a> element different height in Chrome

Question

I'm pretty baffled about this element displaying differently in Chrome than in Safari and Firefox.

I have an <a> that is supposed to match the height of its parent <div>. It does in Safari and Firefox, but not Chrome. I can't set the height manually, because the same code is used for several differently-sized items on the page.

The apparently relevant styles for the <a> element are:

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

The apparently relevant styles for the <div> element are:

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

However, it's quite possible that the problem is coming from some other code, and I don't know enough to see it.

Thanks!

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

Try adding height:100%, and removing position:relative for the links.

height:100%, so that the a elements take the same height as specified for their parent (not necessarily the case for table cells depending on browser), and removing position:relative, because relative positioning of table-cell elements is somewhat problematic, with the result being undefined in the CSS 2.1 specification, and some browser vendors seemingly having different opinions on the clarification of that with CSS 3, or there simply still being bugs in implementing CSS 3 in that regard.