DD_belatedPNG
先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。
DD_belatedPNGの入手
以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがあり…
レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。
cssのdisplay:table-cellで解決
html
<ul id="nav"> <li><a href="#"><img src=" nav_home.png" alt="ホーム"></a></li> <li><a href="#"><img src="nav_shop.png" alt="店舗案内"></a></li> <li><a href="#"><img src="nav_contact.png" alt="お問い合わせ"></a></li> </ul>
css
#nav ul {
display: table;
}
#nav li {
display: table-cell;
padding-top: 1px;
}
親要素にdisplay:tableを設定し、揃えたい子要素にdisplay: table-cell;を設定。
これでもブラウザサイズに合わせて、画像は縮小されるのですが、ブラウザのサイズによっては、以下の画像のように1pxほどずれてしまいます。
vertical-alignを設定しても解決出来なかったので、padding-top: 1px;を設定して対応しました。
このpaddingの設定については、無理やり感があるので、もう少しスマートな方法をご存じの方がいらっしゃいましたら、コメントいただけますと嬉しいです。
graffiti on the web
この投稿へのコメント
コメントはまだありません。