具有相同内容和相同样式的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显示出不同的边框，就像你说的那样。

如果你真的必须修复它，我建议使用伪元素，将其border-top参数设置为相同的值。

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

http://jsfiddle.net/st9uesqd/