(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

カテゴリ: html

IEで画像が表示されない…

他のブラウザでは正常通り。

そんなときは img要素のwidthとheightの値が空になってないかチェック!


また、position: absolute; を指定している場合は
その要素に対してもwidthとheightの値が空になっていないかチェック!

最近 float での横並びをあまり使用せずに、
inline-block を使って横並びを実装するのが私の中で話題に!

float では高さの違う横並びをする時は、親要素で囲ってあげないと行が増えた場合に上下が揃わなくなったりするので、今まで面倒でしたが、inline-block を使用することで快適に。

ただその際に要素と要素の間に空白が出来てしまいます。
html を工夫して消すことも出来ますが、可読性が著しく低下するので、
css をもっと工夫して消しましょう!

親要素 {
display: table;
letter-spacing: -1em;
width: 100%;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}


こんな感じで。

だがしかし! 親要素に display: table; が使えない時には

親要素 {
letter-spacing: -0.285529em;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}

な感じでも対応できます!

-0.285529em; は割と細かく検証してみました。

このページのトップヘ