Debugging differences in inherent height of element between two web pages - html

Question

I have an apparently identical element that's rendering slightly differently on two web pages. I'm sure it's down to some subtle difference in the CSS between the pages, but I can't pin down what it is. One is a live server with various layers of asset compilation and minification, the other is a static mockup.
The HTML is pretty simple:
<div class='category-icon'>
<span class='glyphicon glyphicon-globe'></span>
</div>
And the most immediately relevant CSS isn't much more complicated:
.category-block .category-icon {
font-size: 6em;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-globe:before {
content: "\e135";
}
Here's how it renders in Firefox, with the inspector on so you can see the bounds:
Note the height difference -- 120 vs. 84.
Here are the computed styles from Chrome, which shows the same behavior. Again note the difference in the rectangle height, and the grayed-out height values. (The Firefox inspector shows the same results, but doesn't give height.)
As you can see, it's nothing in the margin, border, or padding that's causing the difference; it's something about the rendering of either the <span/> itself or the surrounding text elements. (Note that the line-height is correctly 120px for both. Is there some reason the line-height would affect the height in one version but not in the other?)
As far as I can tell, the actual HTML is byte-for-byte identical. So I assume the problem is somewhere in the hairier parts of the CSS.
How should I go about diagnosing this problem? What else is likely to be causing the height difference, if I've drilled down this far and can't see anything in the inspector?
Edited to add: The applied styles (from the Chrome 'styles' tab) also appear identical -- see overlaid screenshots here.

Answer 1

David, you need to look at the truncated styles in your DOM inspector through the styles tab. The heights are different in your two examples. Computed styles will tell you what the page has rendered and the style tab will show you all the CSS rules being applied to your element. Look for a rule that is similar to height: 120px;
You will find the culprit there.