- 2009-02-23 (月) 14:29
- 技術
ソースはタグメモのカケラ | IE6で画像の下に余白が入る.
友人から来た問題。
<a href="./"><img src="xxx.png"></a> <a href="./"><img src="yyy.png"></a>
こんな感じ。
で、対処法としてはimgのvertical-alignにtopなりbottomなりmoddileなりを設定する、というもの。
IE6やIE7はベースラインと画像のつなぎがちょっとおかしいので、こういう事もおこる？のか？
友人曰く、a要素にdisplay:block;を設定しても直るらしい。（でもその方法じゃないやり方が欲しかったとか）
色々調べた結果は以下の通り。
直し方がいくつかある。
ひとつは前述の通り、vertical-alignをbaselinでないものにする方法。
もうひとつは各a要素の間のスペースを無くす事。
ちなみに正確に解釈しそうなFirefoxでa要素間に「あ」と文字を入れた所、余白があいてしまった。
これはおそらく、フォントのベースラインの関係で、IEでは間のスペースを文字と解釈してレンダリングしてしまうために、次の要素の前に間が空いてしまう、という事なのだろう。
Firefoxで空かなかったのはスペースを無視してくれるから、といった所か。
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://blog.s-satoshi.net/tech/ie67%e3%81%a7a%e8%a6%81%e7%b4%a0%e3%81%ab%e5%86%85%e5%8c%85%e3%81%97%e3%81%9fimg%e8%a6%81%e7%b4%a0%e3%82%92%e4%b8%a6%e3%81%b9%e3%81%a6%e4%bd%99%e7%99%bd%e3%81%8c%e5%87%ba%e6%9d%a5%e3%81%9f%e6%99%82/trackback/
- Listed below are links to weblogs that reference
- IE6,7でa要素に内包したimg要素を並べて余白が出来た時の対処 from S.Satoshiのブログ