-1
我的縮略圖應該有一些陰影,我想用一些絕對定位的div
來做到這一點,因爲tables
會在IE的底部創建空白空間。而且div
也不適用於Internet Explorer。爲IE瀏覽器優化CSS:陰影通過絕對定位的div
這裏是我的代碼如下所示:
<div class="shadow text_box">
<div class="slt"><font size="-1"> </font></div>
<div class="st"> <font size="-1"> </font></div>
<div class="srt"><font size="-1"> </font></div>
<div class="sl"><font size="-1"> </font></div>
<div class="sr"><font size="-1"> </font></div>
<div class="slb"><font size="-1"> </font></div>
<div class="sb"><font size="-1"> </font></div>
<div class="srb"><font size="-1"> </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 18:20:49
你的寫作風格HTML適合IE ... – Christoph 2012-03-26 18:21:58
我建議你看看Fancybox 1.3(http://fancybox.net/)的代碼,他們也想要跨瀏覽器的陰影,他們成功了。代碼比你的簡單。 – 2012-03-26 18:22:47