Empty div causing alignment issues in FF

Question

I am facing a similar issue as following post

Empty Div Causing Very Strange Behavior

Answer dint help me much. &nbsp fixes alignment issue, but my html code is generated by spring, so I have to find a way to fix it via CSS. I have uploaded sample code at http://jsfiddle.net/sZ77p/1/

If you add an &nbsp or any text in empty lines under HTML code and run, alignment comes perfectly. Please help.

Answer 1

Try adding overflow: hidden; to your div {...}

Answer 2

Have you tried giving your divs and explicit height? Per your example:

div {
  line-height: normal;
  font: inherit;
  color: inherit;
  height: 16px;
}