html - CSS 样式应用的边框仅在 Chrome 中显示不一致

Question

我正在尝试将双边框应用于标题元素。上面的 fiddle 在除 Chrome 之外的所有浏览器中都按预期工作。在 Chrome 中(此处在 Windows 7 上使用版本 37.0.2062.120)，底部边框在某些情况下与顶部边框相距 2px，在其他情况下相距 1px。我不明白这种矛盾。使用网络检查器，我看到元素有一些奇怪的小数点高度，所以我认为这是一些舍入误差。这些小数点高度从何而来？

这是 fiddle :

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;
}

有人可以帮忙吗？谢谢。

Answer 1

好吧，我是个白痴。结果我的浏览器在 Chrome 上被放大了。