爲IE瀏覽器優化CSS：陰影通過絕對定位的div

-1

我的縮略圖應該有一些陰影，我想用一些絕對定位的div來做到這一點，因爲tables會在IE的底部創建空白空間。而且div也不適用於Internet Explorer。爲IE瀏覽器優化CSS：陰影通過絕對定位的div

這裏是我的代碼如下所示：

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

來源

2012-03-26 StoryTeller

你是在炫耀你的作品，還是你有問題？ – 2012-03-26 18:20:49

你的寫作風格HTML適合IE ... – Christoph 2012-03-26 18:21:58

我建議你看看Fancybox 1.3（http://fancybox.net/）的代碼，他們也想要跨瀏覽器的陰影，他們成功了。代碼比你的簡單。 – 2012-03-26 18:22:47

添加陰影是具有絕對沒有實際的後果，而不是看起來有點漂亮的美學特徵。

因此，使該功能僅用於支持瀏覽器而忽略舊功能是完全合理和可接受的。

因此，只需使用box-shadow: 0px 0px 8px 4px black，看看陰影的真棒外觀。

說真的，如果他們沒有更新瀏覽器，沒有人會錯過圖片的陰影。

來源

2012-03-26 18:24:55

爲IE瀏覽器優化CSS：陰影通過絕對定位的div

回答

相關問題