通过绝对定位div优化IE:Shadows的CSS

我的缩略图应该有一些阴影，我想用一些绝对定位的

div

，因为

表

会在IE的底部产生空白。而

div

在Internet Explorer中也不起作用

我的代码是这样的：

<div class="shadow text_box">
    <div class="slt"><font size="-1">&nbsp;</font></div>
      <div class="st"> <font size="-1">&nbsp;</font></div>
      <div class="srt"><font size="-1">&nbsp;</font></div>
    <div class="sl"><font size="-1">&nbsp;</font></div>
       <div class="sr"><font size="-1">&nbsp;</font></div>
    <div class="slb"><font size="-1">&nbsp;</font></div>
      <div class="sb"><font size="-1">&nbsp;</font></div>
      <div class="srb"><font size="-1">&nbsp;</font></div>

//Imagine, here's an image!

</div>

---

添加阴影是一种美学特征，除了看起来稍微漂亮一点之外，它绝对没有任何真正的后果

因此，将该功能仅提供给支持浏览器是完全合理和可接受的，而不考虑旧的浏览器

因此，只要使用

box shadow:0px 0px 8px 4px black

就可以看到阴影的可怕外观

---

说真的，如果不更新浏览器，任何人都不会错过图像周围的阴影。

你是在炫耀你的工作，还是有问题？你的html写作风格适合IE…我建议你看看Fancybox 1.3（）的代码。他们也希望有跨浏览器阴影，并且成功了。代码比您的imo.1更简单。展示你想要达到的目标。2.问一个实际的问题2。自html 4.01以来，“获取限定答案”已被弃用

.text_box { background:#F7D76C; }

.shadow { position:relative;padding:0px;margin:8px; }

.slt { width:8px;height:8px;background:url(../img/shadow_left_top_xs.png) no-repeat bottom right; 
       position:absolute;top:-8px;left:-8px;height:8px;width:8px; }

.st { height:8px;background:url(../img/shadow_top_xs.png) repeat-x bottom left; 
      position:absolute;top:-8px;left:0px;height:8px;width:100%; }

.srt { width:8px;height:8px;background:url(../img/shadow_right_top_xs.png) no-repeat bottom left; 
       position:absolute;top:-8px;right:-8px;height:8px;width:8px; }

.sl { width:8px;background:url(../img/shadow_left_xs.png) repeat-y bottom right; 
      position:absolute;top:0px;left:-8px;height:100%;width:8px; }

.sr { width:8px;background:url(../img/shadow_right_xs.png) repeat-y bottom right; 
      position:absolute;top:0px;right:-8px;height:100%;width:8px; }

.slb { width:8px;height:8px;background:url(../img/shadow_left_bottom_xs.png) no-repeat bottom right; 
       position:absolute;bottom:-8px;left:-8px;height:8px;width:8px; }

.sb { height:8px;background:url(../img/shadow_bottom_xs.png) repeat-x bottom left; 
      position:absolute;bottom:-8px;left:0px;height:8px;width:100%; }

.srb { width:8px;height:8px;background:url(../img/shadow_right_bottom_xs.png) no-repeat bottom left; 
       position:absolute;bottom:-8px;right:-8px;height:8px;width:8px; }