html - 网站仅在一台计算机上显示不正确

Question

所以我建立了一个网站 rangaire.herokuapp.com，它在我测试过的每台计算机上都能正常显示，但只有一台。屏幕分辨率为 1920 x 1080。它使 div:after 属性侵犯了上面的文本。我已经清除了缓存和历史记录，只是不确定还能做什么。有什么想法吗？

浏览器为Win7 IE11

这是CSS。

.mfg {
    margin-top:19px;
    height: 4px;
    padding: 0;
    border: none;
    border-top: 6px solid #1D2148;
    color: #1D2148;
    text-align: center;

}
.mfg::after {
    content: "MFG";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 2.2em;
    padding: 0 0.14em 0 .2em;
    background: white;
    color: #1D2148;
    letter-spacing: 2px;
    margin-right: .1em;
    font-weight: 100;
}

Answer 1

这是由于特定浏览器的文本尺寸较大所致。检查 View -> 文本大小以确保。

问题是一些测量以 em 为单位，而其他测量以 px 为单位。当用户的默认字体大小不完全是 16px 时，这将导致不匹配。

mfg 类的 div 有

margin-top: 19px;

及其::after伪元素有

top: -0.7em;
font-size: 2.2em;

这意味着根字体大小为 16 像素，文本顶部的相对位置为 19 - 0.7 * 2.2 * 16 = 大约 6 像素。但是，如果您将基本字体大小增大 25%，即 20 像素，则相对位置变为 19 - 0.7 * 2.2 * 20 = 大约 12 像素，是距离的两倍。

解决方案:不要假设 100% 表示 16px。无论您在哪里使用 em 作为长度单位，请确保您知道字体大小的真实含义。 (也就是说，将 html 的字体大小设置为以像素为单位的大小。)或者，对整个 CSS 中的所有内容使用 em，而不是 px.