谷歌瀏覽器的兩種元素風格之間的差異

Question

我使用谷歌Chrome開發人員工具，我不斷地檢查一個元素與另一個來回查找可能導致特定樣式問題。

這將是很好，比較元素1和元素之間的風格差異2.

可以這樣用鍍鉻當前或通過一些解決方法呢？有沒有可以做我想找的工具？

當前樣式差異的例子是，我有旁A直列H4其中A在垂直取向出現更高。我不會在這個問題上尋求解決方案，因爲我會將其整理出來。

Answer 1

---

更新：作爲討論的結果是， 「CSS Diff」 Chrome擴展已創建。

---

大問題，對於延長很酷的想法！

概念

證明作爲概念證明，我們可以在這裏做一個小竅門，並避免產生延伸。 Chrome通過變量中的「檢查元素」按鈕保留您選擇的元素。在$0，一個之前在$1等。在此基礎上最後選擇的元素，我創建了一個小片段，最後兩個檢查元素進行比較：

(function(a,b){  
    var aComputed = getComputedStyle(a); 
    var bComputed = getComputedStyle(b); 

    console.log('------------------------------------------'); 
    console.log('You are comparing: '); 
    console.log('A:', a); 
    console.log('B:', b); 
    console.log('------------------------------------------'); 

    for(var aname in aComputed) { 
     var avalue = aComputed[aname]; 
     var bvalue = bComputed[aname]; 

     if(aname === 'length' || aname === 'cssText' || typeof avalue === "function") { 
      continue; 
     } 

     if(avalue !== bvalue) { 
      console.warn('Attribute ' + aname + ' differs: '); 
      console.log('A:', avalue); 
      console.log('B:', bvalue); 
     } 
    } 

    console.log('------------------------------------------'); 
})($0,$1); 

如何使用它？

檢查您想要比較的兩個元素，一個接一個，然後將上面的代碼粘貼到控制檯。

結果