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

【问题标题】：Border applied by CSS style not showing up consistently only in ChromeCSS 样式应用的边框仅在 Chrome 中不一致显示
【发布时间】：2014-09-23 19:10:39
【问题描述】：

我正在尝试对页眉元素应用双边框。上面的小提琴在除 Chrome 之外的所有浏览器中都能正常工作。在 Chrome 中（在此处使用 Windows 7 上的版本 37.0.2062.120），在某些情况下，底部边框距离顶部边框 2px，而在其他情况下，底部边框距离顶部边框 1px。我不明白这种不一致。使用网络检查器，我看到元素的一些奇怪的小数高度，所以我认为这是一些舍入错误。这些小数高度是从哪里来的？

这是小提琴：

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

有人可以帮忙吗？谢谢。

【问题讨论】：

标签： html css border

【解决方案1】：

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

【讨论】：