HTML - 图像框阴影不包括图像边框

Question

我可能需要你的帮助。我尝试使用图像作为div的背景，并使用<EditText android:id="@+id/textpin" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_span="2" android:layout_gravity="center_vertical" android:cursorVisible="true" android:focusable="true" android:focusableInTouchMode="true" android:inputType="number" android:textColor="#3399ff" android:textSize="40sp" /> 覆盖边框。问题是它仍然在Firefox和Internet Explorer的边框处显示背景图像的一个像素，只是谷歌Chrome将其显示为假设。

以下是实际网页的链接：the page where the error occurs。 我希望有人可以帮助我。

顺便说一下。我试图为第二个（野蛮人）使用一个未缩放的图像，但它没有什么区别：/

我很感谢任何建议， Feirell

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