Consider a basic ul and li setup similar to this:
<div id="middle">
<ul>
<li>
<a>
bridal
</a>
</li>
//....
</ul>
</div>
The ul is rendered as a table and the li as a table cell. To ensure stable width when font family changes, I'm using jQuery to adjust the width of the li elements after they're loaded into the DOM.
However, in Chrome, I'm encountering an unexpected height issue where the width of a exceeds what jQuery calculates by 10px or more.
To address these concerns, I need assistance with resolving them: http://jsfiddle.net/qK8Yr/
Please note that removing the code responsible for setting the width eliminates the phantom height.