QLOOKアクセス解析
Deep Forest
…のチラシの裏

・imgタグとimgタグの間がブラウザによって全然違う…。
(HTMLのCSSのお話です)IE 9.0での見え方チェック久々にやったんですが、だめだめでした。

回避策を探してて
対処法 ボックス内にimg要素を配置した時の余白-Nagomi's memoさん
1.img要素のvertical-alignプロパティにbottomを指定する
→(適用済)とりあえずマシになりました。でも今度はFirefoxの空きが少なすぎる。

※昨日の記事での見え方の違い

■IE9.0での見え方
IE9.0での見え方

■Firefox5.0での見え方
Firefox5.0での見え方

・原因は、
IE→『文字の高さの余白』をimgタグ(=画像)にも適用してしまう。
Firefox→適用しない。
せいみたい。いい加減この手の事は、統一してくださいよ!!

上サイトさんの3.ボックス(p要素)のheightプロパティに、画像の高さと同じ値を指定するも追加設定してみる…けど、かなり面倒くさい…。heightちゃんと指定しないといけないのが指定量多くて厳しい。ためしに0px指定したらぐちゃぐちゃになったし。

試行錯誤後、最終的な暫定対処法は、『3の方法を取りつつheight指定をheight:100%;にする』
こうすると、余白はできるんだけどブラウザ同士での見え方は同じになったかも?

■CSS
p.img_p{height:100%; margin:0; padding:0;}
img{vertical-align:bottom;}

■HTML
<p class="img_p"><img src="hogehoge" alt="hogehoge" ></p>

このqlookblogでは、画像をup後、{画像名}とすると、自動でaタグ+imgタグに変換してくれるので実際には↓
<p class="img_p">{画像名}</p>

この手の問題は、簡単にできそうな割にできなくて、結構めんどくせぇ…。後、今後の画像には適用できますが、過去画像は放置の方向に。

00:26 07月27日   [水]
更新遅れます
帰宅が遅かったっ。たぶん朝以降更新予定。
携帯向け RSS ATOM GoogleSitemap 管理ページ