Same font size looks different in same web browser - html

Question

I have two JSP pages with the following code:
A.jsp
<fieldset>
<legend class="noBold" >Datos generales</legend>
<table>
<tr>
<td class="etiqueta" colspan="5">
<label for="fxPresentacion">Fecha presentación:</label>
</td>
</tr>
... more code ...
</table>
</fieldset>
B.jsp
<fieldset>
<legend class="">Datos generales</legend>
<table class="estiloTabla">
<tr>
<td class="etiqueta">
<label for="fxSolicitud">Fecha solicitud:</label>
</td>
</tr>
... more code ...
</table>
Both pages uses the same CSS:
label {
color: inherit;
font-size: 0.98em;
border: 0px;
}
And when you open it in a web browser, label tags looks with different font sizes:
A.jsp
B.jsp
Someone knows what's happen?
P.S: I have a web filter in my PC and I can't show the images. Here are the URL's:
A.jsp: http://i.stack.imgur.com/hbxBQ.png
B.jsp: http://i.stack.imgur.com/hbxBQ.png

Answer 1

ZOOM LEVEL - Embarrassing, but my issue turned out to be that I had one browser window zoom level set above 100% whereas the other browser window had a zoom level of exactly 100%. I don't know why I didn't think to check that first, but I'll post the answer here in case it helps someone else who didn't think of it.

Answer 2

I recommend using the browser's devtools for checking the "computed style".
There you can see...
The calculated font-size
The cascading rules which are respected
Without the complete page and the complete stylesheet it is only possible to guess.

Answer 3

using root-ems rem instead of em could do the trick.
If you want to support older browsers you can use fallbacks. In this case it would look like this:
label{
font-size:15px;
font-size:1rem;
}
They work like this:
Older browsers will ignore the css rule they don't know (in this case rem). While newer browsers, which know the css rule, will simply overwrite the previous one.