忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

IE6とIE7の画像回り込みバグ

大抵の有名なIEのバグは勉強したつもりだったのに、知らないバグにぶち当たったのでメモしておくことにしました。
今回は、自分で失敗したバグのメモです。

画像の回り込みバグ(IE6とIE7)
画像にalign属性で
<img align="left" /> や <img align="right" />
と指定すると、文字を画像の横に回り込ませることができます。
ところがIE6とIE7では、画像のCSSにvertical-alignが指定されていると、回り込みが無効になってしまいます。値はtopでもmiddleでもbottomでも同じで、画像横に上から表示されるはずの文章が、真ん中に一行だけしか表示されません。

IE8を含む他のモダンブラウザでは問題なく正常に表示されるし、ブログで画像の回り込み機能を使う人は少ないようなのでバグに気がつかないことが多いですが、IE6とIE7使用の読者から画像の回り込みがおかしく見えると報告があった場合は、使用しているテンプレートのCSS指定が原因である可能性が大です。

バグの回避
画像の基本指定に下記のような指定がないかどうか調べます。
この指定は、よくCSSの上部にあります。

img { vertical-align: middle; } または
img { vertical-align: baseline; } など

この指定を削除すると、画像の横に回りこむ文章は正常に表示されるようになります。
もしこの処理でテンプレートに使用されている画像や記事内の画像(たとえば拍手とか)がずれる場合は、その部分にだけvertical-align の指定をする必要があります。

拍手[3回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

02 2017/03 04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]