Question

我有两个版本的网页，每个版本都在同一个chrome实例的单独标签中加载。

我有一个h1标签，每个版本的显示略有不同 - 一个显示好像是font-weight: 300;而另一个显示font-weight: 400;，尽管事实上倾倒了每个版本的完整计算样式将它们混合在一起不会产生相关差异！怎么会这样？

这是差异：

@@ -79 +79 @@
--webkit-locale: auto;
+-webkit-locale: en;
@@ -101 +101 @@
--webkit-perspective-origin: 60.25px 18px;
+-webkit-perspective-origin: 56.453125px 18px;
@@ -117 +117 @@
--webkit-transform-origin: 60.25px 18px;
+-webkit-transform-origin: 56.453125px 18px;
@@ -248 +248 @@
-text-align: center;
+text-align: start;
@@ -267 +267 @@
-width: 120.515625px;
+width: 112.921875px;

请注意，字体粗细没有区别。我假设宽度的差异可以用字体权重的差异来解释，而不是造成差异。 那么为什么一个显示比另一个更大胆呢？

编辑： html很简单：

<div class="logo float-left">
    <a href="#top">
        <h1>TEXTHERE.<span>ly</span></h1>
    </a>
</div>

我已经在上面包含了--only-不同的计算css。

Answer 1

事实证明这是两个页面之间的相关差异：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

获取此样式表

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

和

@import url(http://fonts.googleapis.com/css?family=Lato|Open+Sans:400,300);

取这个

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

我仍然不明白为什么Chrome和Firefox检查员的计算样式都是相同的。

是什么导致两个具有相同计算样式的html元素在显示中有所不同？

1 个答案: