このブログのフッタをデザインしているときに、なぜか最下部にスペースが入ってしまうという現象に悩まされていました。
詳しく調べてみると、どうやら「楽天モールウィジェット」が"img"要素をJSで挿入していることが分かりました。
<img src="http://ad.yieldmanager.com/pixel?adv=******&null&at=2" width="0" height="0" border="0">上記の要素が</body>の直前に勝手に挿入されるのが原因のようです。
恐らく、この部分を根本的に削除するには「楽天モールウィジェット」を完全に削除する以外方法は無いと思われます。
なので今回は、CSSでこの要素を非表示にして対策することにしました。
CSSセレクタによる非表示化
上記のimg要素を消すには以下のようにします。
img[width="0"], img[height="0"]{display:none;}上記のCSSコードを挿入してあげれば、対策できそうです。
このコードは、CSSレベル2で使用できる方法で、img属性のwidth(height)が0の場合に適応されます。
しかし、このコードだと他のimg要素に影響を及ぼす可能性があります。もしCSSレベル3が使用可能であれば、以下のコードが確実です。
img[src*="ad.yieldmanager.com"]{display:none;}上記のコードは、img要素のsrc属性に"ad.yieldmanager.com"が含まれている場合に適応されます。
まだまだCSS3非対応のブラウザも多いので、実装する場合は、CSS2版の利用をお勧めします。