Re: [問題] 請問CSS取代表情符號的問題~~

[GALINE (天真可愛CQD)]

嘗試做了一個
http://pastehtml.com/view/1d7slza.html


我用的把戲是

1.把有表情圖案[:)]的部份換成 <span class="emoticon smile">:)</span>

2.emoticon設定 display:inline-block，表情圖片作為背景
  然後 overflow 的部份不顯示文字，寬高=0。上左的padding=圖片寬高。


這樣內容文字在畫面上看不到，但還是複製的到。
這段 code 基本上能支援多種表情符號，不過量大時要自己改寫一下，不然 code 夭壽醜

另外是 inline-block 的 IE6 支援我印象中有問題，不確定會看起來變成怎樣


--
這閃電拳能射出雷射光，威力每平方公分一萬億瓦特
威力無比，拳到之處，攻無不克

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.245.67.205
※ 編輯: GALINE          來自: 60.245.67.205        (02/13 19:08)
推 s25g5d4:恭喜 IE8爆了...
→ s25g5d4:另外就是直接抓html出來可能會取代到標籤、script等
→ s25g5d4:PS.IE8爆了是因為進入Quirks模式 IE8 Strict沒問題
推 s25g5d4:其實我覺得IE8對標準的支援性已經很好了 會爆掉多半是進入
→ s25g5d4:Quirks模式 也就是html第一行沒有正確的DOCTYPE..
→ GALINE:因為比對是白名單，所以應該是不會取代到不該取代的東西
→ GALINE:不過另一個原因是我不知道怎麼用純DOM的方式來做，畢竟[:)]
→ GALINE:不是DOM元素，我只會用字串比對來抓[汗]
→ GALINE:BTW，如果只加上Doctype就能在IE上顯示正常的話，那我會
→ GALINE:有點驚訝 XD
推 jimshsu:感謝GALINE大這招~學起來了!!
→ jimshsu:附帶請教一下~圖片我有辦法指定大小嗎?~若是字型為12px
→ jimshsu:我把圖片設成12X12size就會大小較剛好~不設定他會以icon的
→ jimshsu:原始大小呈現~看起來就很突兀
→ GALINE:可以把Padding設成1em，不過我覺得綁圖片大小會比較安全
→ GALINE:另外也可以把大小寫到smile跟sad裏面，每張圖分別指定
※ 編輯: GALINE          來自: 211.73.175.49        (02/13 23:11)