相同的字体大小在同一Web浏览器中看起来不同

Question

我有两个JSP页面，其中包含以下代码：

A.jsp

<fieldset>  
<legend class="noBold" >Datos generales</legend>    
<table> 
    <tr>
        <td class="etiqueta" colspan="5">
            <label for="fxPresentacion">Fecha presentaci&oacute;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>

两个页面都使用相同的CSS：

label {
    color: inherit;
    font-size: 0.98em;
    border: 0px;
}

当您在网络浏览器中打开它时，标签标签看起来具有不同的字体大小：

A.jsp

B.jsp

有人知道发生了什么事吗？

P.S：我的电脑上有一个网络过滤器，我无法显示图像。以下是网址：

A.jsp：http://i.stack.imgur.com/hbxBQ.png

B.jsp：http://i.stack.imgur.com/hbxBQ.png

Answer 1

缩放水平-令人尴尬，但问题出在我的浏览器窗口缩放级别设置为100％以上，而另一个浏览器窗口具有缩放级别恰好是100％我不知道为什么我不打算先检查一下，但是我会在这里发布答案，以防它帮助那些没有想到的人。

Answer 2

我建议使用浏览器的devtools检查“计算风格”。
在那里，您可以看到...

• 计算出的字体大小
• 所遵循的级联规则

没有完整的页面和完整的样式表，只能猜测。

Answer 3

使用root-ems rem代替em可以解决问题。

如果您想支持旧版浏览器，可以使用后备广告。在这种情况下，它看起来像这样：

label{
    font-size:15px;
    font-size:1rem;
}

他们的工作方式如下： 较旧的浏览器将忽略他们不知道的css规则（在本例中为rem）。虽然知道css规则的新浏览器只会覆盖前一个浏览器。