HTML - 图像框阴影不覆盖图像边框

Question

我可能需要你的帮助。我尝试使用图像作为 div 的背景，并用 box-shadow 遮盖边框。问题是它在 Firefox 和 Internet Explorer 的边界处仍然显示为背景图像的一个像素，只是 Google Chrome 会按预期显示它。

这是实际页面的链接:the page where the error occurs .我希望有人可以帮助我。

顺便说一句。我尝试为第二个(野蛮人)使用未缩放的图像，但没有任何区别:/

感谢您的建议，费雷尔

Answer 1

避免此问题的一种方法是通过其他方法对图形进行垂直居中，而不使用变换。一种流行的方法(在基于转换的解决方案可行之前)是利用 display:table 和 display:table-cell 样式。

将此方法应用于您的 CSS，并进行调整以修复它导致的任何视觉不一致，您将获得对以下声明 block 的修改:

/* ./resurces/css/positioning.css */
#graph_wrapper{
    width: 100%;
    height: 100%;
    text-align: center;
    /*display: block;*/
    display: table;
    position:absolute;
}
#graph_wrapper_inner{
    /*height: 550px;*/
    /*min-width: 900px;*/
    display: table-cell;
    vertical-align:middle;
    /*position:absolute;*/
    /*padding: 20px;*/
}
#graph{
    display:inline-block;
    padding: 20px;
    height: 550px;
    min-width: 900px;
    position: relative; 
}
#graph,#graph_wrapper_inner{
    /*top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);*/
}
.YPositioner{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#header,#left,#right,#bottom,#graph{
    background-color: #202020;
    color: #36B1EC;
    border: 3px solid #035881;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;      
}

/* ./resurces/css/diagram.css */
#graph_wrapper_inner{
    /*background-color: rgba(32,32,32,0.95);*/
}

这是一个 JSfiddle演示修复。为了将来引用，创建一个更轻量级的问题演示将使人们更容易使用您的代码，并且可能会得到更有用的回复。希望这可以帮助!如果您有任何问题，请告诉我。