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

【问题标题】：Same font size looks different in same web browser相同的字体大小在相同的 Web 浏览器中看起来不同
【发布时间】：2019-05-10 08:27:27
【问题描述】：

我有两个带有以下代码的 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

【问题讨论】：

lagend 和 table 都有不同的类
是的，但是我的问题出在标签中。
您将em 用于您的font-size，这意味着它将相对于当前字体大小进行缩放。似乎在某处的父元素中设置了固定宽度font-size。
我打赌@HiddenHobbes 是对的。检查问题标签的父节点中是否没有不同的字体大小。
您是否检查过 devtools 中的元素并查看它的实际大小以及它的来源？

标签： html css internet-explorer

【解决方案1】：

ZOOM LEVEL - 尴尬，但我的问题是我有一个浏览器窗口的缩放级别设置在 100% 以上，而另一个浏览器窗口有一个缩放级别正好是 100%。我不知道为什么我没有想到先检查一下，但我会在这里发布答案，以防它帮助其他没有想到它的人。

【讨论】：

【解决方案2】：

我建议使用浏览器的开发工具来检查“计算样式”。
在那里你可以看到...

计算出来的字体大小
遵守的级联规则

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

【讨论】：

【解决方案3】：

使用 root-ems rem 而不是 em 可以解决问题。

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

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

它们是这样工作的： 较旧的浏览器将忽略他们不知道的 css 规则（在本例中为 rem）。而了解 css 规则的较新浏览器将简单地覆盖之前的浏览器。

【讨论】：

然后我建议 IE8 的固定大小，以及从不浏览器的相对大小。像这样：label{font-size:15px;font-size:1rem;}
+1 @Schtailian 的评论。这正是我过去支持 IE8 字体大小的方式。它绝对有效 - 只需确保 px 值排在第一位，rem 排在第二位。
感谢 Schtailian 的信息！我会试试的
好吧，我使用它，它解决了问题。但是在解决另一个问题之后，我们找到了真正的问题。有人把一张桌子放到另一张桌子上……天哪！因此，使用 em 字体大小，它看起来更小。
是的，那不是有效的 html。最好先解决这些问题:)