只在一台电脑上显示不正确的网站

所以我建了一个网站rangaire.herokuapp.com，并且它在我测试过的每台电脑上正确显示，但只显示一个。屏幕分辨率为1920 x 1080.它使div：after属性侵犯了上述文字。我清除了缓存和历史记录，只是不知道还有什么要做。有任何想法吗？只在一台电脑上显示不正确的网站

浏览器是Win7的IE11

The Problem

这是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; 
}

来源

2014-02-17 Seal

技术上来说，字母MFG是实际的内容，所以不应该用在伪元素中。无论如何，我们需要在JSfiddle中看到HTML.CSS。目前我们没有足够的信息，虽然我不喜欢我看到的负面利润率和定位。 –

标题让我想起了一个与医生和手指骨折的笑话。是不是电脑坏了？ – Tibo

始终必须询问兼容模式是否打开。另外，请确保ie设置为使用与其他浏览器/渲染引擎版本相同的浏览器/渲染引擎版本。 – Ben

这是由具有较大文本大小的特定浏览器引起的。检查视图 - >文本大小以确保。

问题是某些测量是在em中完成的，而其他测量是在px中。当用户的默认字体大小不是16px时，这会导致不匹配。

与mfg类div有

margin-top: 19px;

及其::after伪元件具有

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

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

解决方案：不要假设100%意味着16px。无论你使用em作为长度单位，确保你知道字体大小真的是什么。（即将字体大小html设置为像素大小。）或者，在整个CSS中使用em来代替px。

来源

2014-02-18 09:37:00

这是一个很好的解释。我即将实施。我通常使用px，但是“测试”他们看看我更喜欢哪一个。 – Seal

只在一台电脑上显示不正确的网站

回答

相关问题