text-indent:-9999em;以外の画像置換
text-indent:-9999em;をずっと使っていのですが、
text-indent:-9999em;はもう古いとのことなので他の方法を探しました。
1、JavaScriptを使う
（メリット）
これ、超簡単。超便利。
ソースもキレイだし、CSSもシンプルですむ！
（デメリット）
でもJavaScriptが切ってある環境では、カーソルが乗っても変化しない。
できるだけ、多くの環境に対応させようと思うと厳しい感じ。
2、overflow:hidden;を使う。
サンプル
見た目的にはJavaScriptと変わらない。。
html
<ul>
<li><a>A</a></li>
</ul>
って、あった場合に
aをpadding-top:80px;で下げて
liでoverflow: hidden;を使ってはみ出した部分を消しました。
CSSもっとシンプルにできそうなんだけどな。。
ひとまず、メモメモ。
- 27.10.2009
mayumi
(0)
カテゴリー
月別アーカイブ
- 2011年9月（1）
- 2011年2月（7）
- 2011年1月（5）
- 2010年12月（3）
- 2010年11月（1）
- 2010年10月（1）
- 2010年9月（3）
- 2010年8月（12）
- 2010年7月（22）
- 2010年6月（11）
- 2010年5月（12）
- 2010年4月（13）
- 2010年3月（16）
- 2010年2月（13）
- 2010年1月（13）
- 2009年12月（16）
- 2009年11月（33）
- 2009年10月（26）
- 2009年9月（12）
- 2009年8月（18）
- 2009年7月（45）
- 2009年6月（14）
- 2008年12月（2）
- 2008年11月（1）
- 2008年10月（1）
- 2008年9月（2）
- 2008年7月（2）
- 2008年6月（2）
- 2008年5月（2）
- 2008年4月（3）
- 2008年3月（7）
- 2008年2月（10）
- 2008年1月（20）
- 2007年12月（9）
コメントする