CSS box model in Firefox vs Safari: Sizing with percentages / height: 100%?

[WeeMan]

Let's take this HTML:\[code\]<div id="work"> <div id="header"> <a href="http://stackoverflow.com/questions/15646486/index.html#content" class="backlink">Startseite</a> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>\[/code\]And this CSS:\[code\]html,body { height: 100%; background: orange;}#work { height: 100%; background: grey;}#header { display: table; height: 50%; width: 100%; margin: 0 auto; background: blue;}.backlink { display: block; width: 120px; height: 100%; margin: 0 auto; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url('http://www.myparisnet.com/wp-content/images/Tour-Eiffel-052.fullsize.JPG') no-repeat center center; background-size: auto 90%; background-color: red;}\[/code\]In Safari, '.backlink' (red background) fills 100% of the height of '#header' (blue background). In Firefox, this is not the case. The header is sized correctly, but not \[code\].backlink\[/code\] - why? What can I do to make \[code\].backlink\[/code\] 100% in height?Fiddle: http://jsfiddle.net/WMX2s/1/