由CSS樣式應用的邊框只在Chrome中不一致顯示

我正在嘗試將雙邊框應用於標題元素。上述提琴在所有瀏覽器中都能正常工作，除了Chrome之外。在Chrome中（這裏使用Windows 7上的版本37.0.2062.120），在某些情況下，底部邊框與頂部邊框相距2像素，在其他情況下相距1像素。我不明白這種不一致。使用網絡檢查器，我發現元素有一些奇怪的小數高度，所以我認爲這是一些舍入誤差。這些十進制高度來自哪裏？由CSS樣式應用的邊框只在Chrome中不一致顯示

這裏的小提琴：

http://jsfiddle.net/7qshmLbv/2/

，這裏是我使用的CSS樣式：

h2 { 
    color: #023D62; 
    text-transform: uppercase; 
    font-size: 11px; 
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    border-bottom: 2px solid #7F7F7F; 
    padding-bottom: 3px; 
    vertical-align: top; 
    position: relative; 
    margin-bottom: 20px; 
} 

h2:before { 
    background: none; 
    border-bottom: 1px solid #7f7f7f; 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: -4px; 
    pointer-events: none; 
}

誰能請幫助？謝謝。

來源

2014-09-23 pringshia

嗯，我是個白癡。原來我的瀏覽器在Chrome上放大了。

來源

2014-09-23 19:13:56 pringshia

由CSS樣式應用的邊框只在Chrome中不一致顯示

回答

相關問題