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

我正在尝试将双边框应用于标题元素。上述提琴在所有浏览器中都能正常工作，除了Chrome之外。在Chrome中（这里使用Windows 7上的版本37.0.2062.120），在某些情况下，底部边框与顶部边框相距2像素，在其他情况下相距1像素。我不明白这种不一致。使用网络检查器，我发现元素有一些奇怪的小数高度，所以我认为这是一些舍入误差。这些十进制高度来自哪里？由CSS样式应用的边框只在Chrome中不一致显示

这里的小提琴：

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

谁能请帮助？谢谢。

来源

2014-09-23 pringshia

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

来源

2014-09-23 19:13:56 pringshia

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

回答

相关问题