具有相同內容和相同樣式的Div具有不同的虛線邊框

Question

所以我創建了一支筆，因爲您看到第一個div有border-bottom和第二個border-top。但第二個div的邊界與第一個不同。

http://codepen.io/Chrez/pen/meRxBW

<div class="first"></div> 
<div class="second"></div> 

截圖在Firefox：

Answer 1

這將是從你的瀏覽器渲染問題。它看起來在Chrome中運行良好，但是最新的Firefox和IE顯示了不同的邊界，就像你說的。

如果你真的必須修復它，我會建議使用僞元素，邊界參數設置爲相同的值。

.first:after{ 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    border-top:1px dashed #FFFFFF; 
    height: 1px; 
} 

http://jsfiddle.net/st9uesqd/