[閒聊] 標題區塊icon與文字的對齊

[JYHuang (夏天到了，冷不起來了說)]

   <h3>
       <span class="icon"></span>
       這是標題
   </h3>
   span.class{
     height:15px;
     width:15px;
     background-image:...
     display:inline-block;
     vertical-align:middle;
   }

     有時候想要在標題的文字旁邊加個icon來做裝飾
   不過遇上不同的瀏覽器就會有不同的對齊..會讓人頭大
   像上面的效果，在FF,IE,GC都會出現不同的對齊
   (不在h3上做，要為了要把span.icon做成通用的元件)



   最後想了想  八成是inline-block這個屬性的關係
   所以想到了一個辦法..
   <h3>
      <span class="icon">&nbsp;</span>
      這是標題
   </h3>
   span.class{
     background-image:...
     padding:0px 7px;
   }

   直接忽略掉display這個屬性
   在span加上padding..成個偽block
   這樣所有瀏覽器就將文字與span同樣視為同樣的區塊，自己對齊了
   (PS..不加 &nbsp; 的話，IE6不會顯示span..)

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.39.168.158
※ 編輯: JYHuang         來自: 114.39.168.158       (09/16 13:55)
→ xiphoid:icon直接用bg-image跟padding加在h2就好 span多餘了
→ xiphoid:                              3
→ JYHuang:我文內有說明了..要是h3已經有背景圖的話，會衝突
推 evenwu:直接用block+float:left吧 不然會出很多問題
→ evenwu:另外的方法就是<h3><span>title</span></h3>這樣也可以
→ evenwu:把span display:block之後隨你加背景了
→ JYHuang:這樣也是可以...不過我是參考JQuery UI的Accordion
→ JYHuang:手動把icon加入H3元件內。
→ JYHuang:因為有考慮到通用性..所以會想這樣弄
→ ateclean:都有span了 考不考慮直接換<img />?
推 robert38:標題還是用文字比較好吧~雖然不見得文字會顯示出來XD
→ JYHuang:用background-image比較方便做CSS Image Sprites
→ ateclean:那如果是要侵入html層的話 我會選擇在外面包div而非內插
→ ateclean:span。你所說的原標題底圖就改設在<div>，icon用<h3> @@
→ aceone:一般都是用<span> or <em> 啊
→ JYHuang:以plug in的角度來看，用spa>對整體的架構影響最小..