使“双边框”（仅边框底部）跨浏览器兼容

Question

CSS：

.double-border {
    border-bottom: 1px solid #cd888a;
    padding:3px 0;
    height:1.5em;
    position: relative;
}
.double-border:before {
    background: none;
    border-bottom: 1px solid #2e0000;
    content: "";
    display: block;
    position: absolute;
    bottom: 0px;
    top:0px;
    left:1px;
    right:1px;
    pointer-events: none;
}

演示：https://surgemovement.org/（请参阅某些文本的边框底部）

• Firefox 完美显示
• IE 完美显示
• Chrome 有一个问题：pseudo:before 边框在顶部，看起来像废话
• （Windows Safari 显示它与 Chrome 相同，但我真的不在乎那个浏览器）

关于如何使用 Chrome 解决此问题的任何想法？

注意：因为另一种“插入”的双边框方式不能仅是边框底部，所以该解决方案被淘汰了。

Answer 1

.double-border {
    border-bottom: 1px solid #000;
    -webkit-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#FFFFFF,direction=180,strength=1);
}

可能需要稍微玩一下过滤器（或放弃 IE8 支持：）。

小提琴 - http://jsfiddle.net/mpjura/tk3x2ad3/