Question

我正在尝试将双边框应用于标题元素。上面的小提琴在除Chrome之外的所有浏览器中均可正常使用。在Chrome中（在Windows 7上使用版本37.0.2062.120），在某些情况下，底部边框距离顶部边框2px，在其他情况下距离顶部边界1px。我不明白这种不一致。使用Web检查器，我看到元素的一些奇怪的小数高度，所以我认为它是一些舍入错误。这些小数高度来自哪里？

这是小提琴：

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浏览器。

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

1 个答案: