Border CSS框阴影向Div添加任意白色边框

我给一个包含img的元素添加了一个框阴影，它在元素的底部创建了一个任意的白色边框。没有通过CSS应用边框（我甚至尝试使用

border:none；

进行覆盖，但运气不佳）。直接应用于图像时，它会正确显示。但当应用于包含图像的div时，将显示边框

非常感谢您的帮助

<style>
html,body,div,img {margin:0; padding:0;} 
body {padding:50px;}

.badge_image {
  float:left;
  /* css drop shadow */
  -webkit-box-shadow: 1px 1px 5px 0px #a2958a;
  -moz-box-shadow: 1px 1px 5px 0px #a2958a;
  box-shadow: 1px 1px 5px 0px #a2958a; 
}
</style>

<div class="badge_image">
    <img src="badge-image.jpg" height="75" width="75" />
</div>  

<br clear="all" /><br clear="all" />

<img src="badge-image.jpg" height="75" width="75" class="badge_image" /><!-- works fine -->

html，body，div，img{margin:0；padding:0；}
正文{padding:50px；}
.徽章{
浮动：左；
/*阴影*/
-网络工具包盒阴影：1px 1px 5px 0px#a2958a；
-莫兹盒阴影：1px 1px 5px 0px#a2958a；
盒影：1px 1px 5px 0px#a2958a；
}

以下任一项：

添加

显示：块到您的
img

在
div
上定义
0px
的
行高度

图像是一个内联元素，因此有空间放置文本，并保留该行

尝试显示图像块

.badge_image img {
    display: block;
}

实现这一点的另一种方法是添加
virticalign:top到
img
在一些情况下，
display:block
解决方案对我不起作用，但将其放在与框阴影相同的元素上会起作用

backdrop-filter: blur(0px);

我不确定为什么会这样，但确实如此。
在Chrome 14中，它们对我来说看起来完全一样@Thomas在Windows7上的Chrome14.0.835.29中查看您的链接时，会在第一张图片上显示边框哇，没关系。它确实出现了。它只是没有显示在JSBin链接的预览窗格中，我的坏蛋。你们回答得太快了，谢谢！同样有趣的是，在我的演示代码中，我使用了一个HTMLdoctype…如果切换到XHTML1.0过渡版，一切都很好。疯狂的东西。Kraz基本上说了同样的话，但为了简单起见标记了这个，因为8年后，仍然是一个问题：）非常感谢：D