IE用CSSの最適化：絶対配置されたdivを介した影

Question

tablesはIEの一番下に空きスペースを作成するので、サムネイルにはいくつかの影があります。これは絶対に配置されたdivのもので行いたいと思います。また、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> 

CSS：

.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; } 

Answer 1

影を追加すると、少しきれいに見えるする以外は全く本当の結果を持っていない審美的な機能がある

は、ここに私のコードは次のようになります。

したがって、古いブラウザを無視して、サポートするブラウザでのみ機能を利用できるようにすることは、まったく合理的で容認されます。

したがって、box-shadow: 0px 0px 8px 4px blackを使用して、素晴らしいシャドウの外観を見てください。

真剣に言えば、誰もブラウザを更新しないと画像の周りに影を見逃すことはありません。