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

Question

我可能需要你的帮助。我尝试使用图像作为 div 的背景，并用box-shadow. 问题是它在 Firefox 和 Internet Explorer 的边界上仍然显示为背景图像的一个像素，只是谷歌浏览器按预期显示它。

这是实际页面的链接：发生错误的页面。我希望有人可以帮助我。

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

我很感谢任何建议，费雷尔

Answer 1

可以这样试试吗。当您使用时，box-shadow您应该添加-webkit-和-moz-前缀以及 box-shadow 属性

例如。

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

Answer 2

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

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

/* ./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来演示修复。为了将来参考，创建一个更轻量级的问题演示将使人们更容易使用您的代码，并且可能会为您提供更多有用的回复。希望这可以帮助！如果您有任何问题，请告诉我。