DEARDAYS別冊さんで紹介されている、写真をポラ風にするカスタマイズ。あちこちで見かける人気カスタマイズの１つですね。
ところがこのポラ風、winIEだと「ただの枠になってしまう」ということも。テンプレートによって上手くいく場合と枠線のみになってしまう場合がある様子。
この問題についてプチバレブログさんでは画像を個別にdivでくくる方法で解決策を紹介されていますが、何故かうちにも「ポラ風にならなくて…」という質問が以前から何度もきていまして…（苦笑）お返事がてら、そもそも何故winIEじゃダメなのかと、3秒でIEに適用させる方法を紹介しておきます。
▼何故IEでは上手くいかないのか
まず、ポラ風のカスタマイズのCSSを見てみましょう。
.pict {
background-color: #f6f6f6; ←ポラ背景色
border-width: 2px; ←ポラの外枠の線の幅
margin: 5px 10px 5px 5px; ←ポラから記事までの距離
padding: 10px 10px 50px 10px; ←ポラ外枠から写真までの距離
border-style: solid; ←線の種類（これは実線タイプ）
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3; ←ポラ外枠の色
}
ブログカスタマイズメモ DEAR DAYS別冊 | 写真をポラロイド風にする
ここで注目するのはポラ外枠から写真までの距離です。
そのpaddingの値がポラの白い台紙の部分です。このpaddingが有効にならないから枠線だけが残ってポラ風にならないということです。
▼じゃあなんでpaddingが効かないの？
winIEにはこの2つのバグがあります。
・XML宣言のあるXHTML文書に互換モードを適用させてしまう
・WinIE6.0互換モード及び5.5以前ではimg要素にpaddingが効かない
さらに付け加えるならば
・sbに限らず多くのブログで生成されるのはxhtml文書
・xhtml文書にはXML宣言が強く推奨される為、XML宣言有りの場合が多い
▼つまり、こういうことが起こっています。
1.記事を書くとxhtml文書で生成される
2.xhtml文書にはXML宣言が入っている
3.winIEが互換モードと思い込む
4.互換モードではimgのpaddingが無効
5.枠線だけになる
▼テンプレによって異なるのは？
テンプレによってXML宣言が入っているものといないものがあるからです。
うちの配布しているテンプレでもそうですが、基本的にはXML宣言は入れることを推奨されているものなので、デザイン的に問題がなければ入れてあります。
しかしwinIEの互換モードではCSS1/CSS2ではボックスの幅を算出するときにpaddingやborderのサイズは除外されるが、WinIEではこれらを含めて幅や高さを算出するというすごく嫌なバグがあります。
このバグが影響するようなデザインの時はXML宣言を予め入れていません。
▼じゃあどうしよう？
「WinIE6.0互換モード及び5.5以前ではimg要素にpaddingが効かない」のであれば、WinIE6.0の標準モードで表示させればpaddingは有効になるということ。
「XML宣言のあるXHTML文書に互換モードを適用させてしまう」のですからXML宣言がなければXHTML文書に互換モードを適用させないということになります。
つまり、XML宣言を抜けばオッケー。windowsでIE5.5以前をお使いの場合はセキュリティのためにもアップデートを推奨かな（笑）
▼とっとと3秒でできる解決方法を教えろ！
sbの場合はテンプレートのHTMLから最初のこの1行を削除します。
<?xml version="1.0" encoding="{site_encoding}"?>
以 上 ！
ちなみに、その他のブログの場合は{site_encoding}が違う値になっていると思いますが、消すのは同じくこの1行です。
▼XML宣言を削除するデメリット
- HTML-Lintでちょっぴり点を引かれる。
（でもW3Cでは問題なくValidもらえるからいいかとｗ） - XML宣言を含むことを前提に作られたテンプレートでは、paddingやborderを含む要素において若干サイズが違いが発生する場合があります。
ただ、これはwinIE6だけでの話です。
winIE6以外では元々XML宣言のない標準モードで見えていますので、winIE以外（FirefoxやOpera等）でも動作確認されているテンプレートであれば大丈夫と思っていいでしょう。
blog*citronのは削除しても崩れないはずです（笑）
IEのCSS実装状況は余り良いとは言えないようなので、IE7では余計な新機能とかなくていいから、きっちり実装してくれないかなぁと思っています。
僕もうIE対策するの疲れたよパトラッシュ。
Close
Blog Feed