Web ページの 2 つのバージョンがあり、それぞれが同じクロム インスタンスの別のタブに読み込まれます。
それぞれの完全な計算されたスタイルをダンプし、それらを一緒に比較しても関連する差分が生成されないという事実にもかかわらず、バージョンごとにわずかに異なる表示をする 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;
font-weight に違いはないことに注意してください。そして、幅の違いは、違いを引き起こすのではなく、font-weight の違いによって説明できると思います。では、一方が他方より太字で表示されるのはなぜでしょうか?
編集: HTML は単純です:
<div class="logo float-left">
<a href="#top">
<h1>TEXTHERE.<span>ly</span></h1>
</a>
</div>
そして、上記の -only- 異なる計算済み CSS を含めました。