この辺に落ち着こうかな。
従来のノーマルタイプ。キャプションは画像の下に表示されます。
ポラロイド風。キャプションが画像のボーダー内に含まれるパターン
ドロップシャドウあり、ボーダーなしのパターン
ドロップシャドウなし、ボーダーありのパターン
ドロップシャドウもボーダーもなしのパターン。
今回の試行で分かったことは、IE7のみに適用されると思っていたCSSハックが、実はOpera9.xにも有効だったこと。
*+html body div.shadow { margin-bottom: -15px; } /* just for IE7 */
何かOpera9.27での表示がおかしいなと思ったら、このハックがOperaにも適用されていました（追記：XML宣言するとOperaにも通ってしまうみたいです）。なので、純粋にIE7のみをターゲットとしたい場合は、以下のようにすると良いらしい。
*:first-child + html div.shadow { margin-bottom: -15px; } /* just for IE7 */
ちょっとググった感じでは、IE6とIE7とを一緒にハック対象とする方法が分からなかったんだけど、個別に書かないとダメかなぁ。
近々、ドロップシャドウのまとめ記事を書こうかと思っています。
IE8はベータ版なので、とりあえず無視ですね。:beforeや:afterの対応も中途半端で、まだまだです。
Y:
ALL:
このサイト「
http://thomas.tanreisoftware.com/css_filters/huzzah.html
IE6と7のみを一括で対象と出来るハックは上記サイトを眺めても見当たらないですね。IE6と7以外を対象とするなら「html>/**/body」なんですが。
ちなみに、現時点で気にしてもしょうがないのですがIE8だと若干崩れますね。
これは「*:first-child + html」がIE8にも効くからだと思われます。
http://thomas.tanreisoftware.com/css_filters/caio.html
上記ハックで6と7対象の指定を個別に括ってやると（現時点での）IE8除けにはなるかと思いますが、むしろそれであれば通常指定にIE6,7用の指定をして、「html>/**/body」で正しい指定を上書きしてやる方がいいのかもしれません。
この間色々検証してみたのですが（http://welkin.s60.xrea.com/blog/index.php?UID=1207493829