html5のテーブルの画像に3pxの隙間が出来る件

jquery mobileを使ったコーディングをしていて、なぜか画像に3pxの隙間が出来、ずっとjquery mobileの問題だとばかり思い、こればかりを調べていました。
でも、全然出てこない。みんな困ってないのかな? と思っていたところ、たまたま「html5 table ずれる」などのキーワードで調べてみると

こんな記事を発見
http://blog.sakurachiro.com/2011/08/img-vertical-align-bottom/

そのまま引用します。

sectionとarticleの違いがよく分からないまま
ちょいちょいhtml5でコーディングを始めた
そんなこんなで画像の下に隙間ができる。

firebugを見上がら、なんだっけなーこれって思ってたけど
reset.cssのimgの指定がこうなってた

1
img{border:0;}
なのでvertical-align:bottom;を追加してみたら隙間が消えた。

1
img{border:0;vertical-align:bottom;}
昔、vertical-align:bottom;を指定してたと思うのだけれど、
なんで今入ってないんだろう
何か理由があって削除したのかな?

思い出せない

 

photoshopで画像をスライスさせて、そのままjquery mobileのテンプレートにいれてテストをしていたので、てっきりjqmの問題だと思い込んでいました。

ということで、試してみたらすっきり直りました。
ああ・・・なんにちこれで悩んだことか。

 

肉スライス

「html5のテーブルの画像に3pxの隙間が出来る件」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です