是什麼導致具有相同計算樣式的兩個html元素在其顯示中發生變化？

我有兩個版本的網頁，每個版本都在同一個chrome實例的單獨標籤中加載。是什麼導致具有相同計算樣式的兩個html元素在其顯示中發生變化？

我有一個顯示稍有不同在每個版本的h1標籤 - 一個顯示器，如果它是font-weight: 300;和其他font-weight: 400;，儘管傾銷每個完整，計算樣式和版本比較他們在一起不會產生相關的差異！怎麼會這樣？

這裏的DIFF：

@@ -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。

來源

2013-08-02 pabo

其實提供HTML和CSS可能會有幫助。 – Scott

它們都受到不同來源的變換，這可能會導致變厚。 –

你是否設置了字體權重？（你聲稱兩個） – dandavis

原來，這是兩個頁面之間的相關區別：

@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檢查器中計算出來的樣式都是一樣的。

來源

2013-08-02 03:07:54 pabo

是什麼導致具有相同計算樣式的兩個html元素在其顯示中發生變化？

回答

相關問題