display:inline-block 會多出空白間距的完美解法

.inline-block{
  ul{ /*解法*/
letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
word-spacing: -4px;
font-size: 0;}
li{ padding:5px 8px;
background:#eee;
/*解法*/
font-size: 12px;
  letter-spacing: normal;
   word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
  }
}
P.S以上是SCSS寫法

參考來源：http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements


以上經過跨瀏覽器的測試，完美的支援chrome、safari、firefox、ie789，感動吶！！
來源經過了很多測試，但多數是對html標籤動手腳，請看最後一則範例，才是真正完美解決inline-block間距的解法

（話說我好懶得安裝SyntaxHighlighter.....所以讓大家看這麼直白的css真是慚愧...說是慚愧但還是懶得裝.....）

非常基本的html label標籤應用...

LABEL標籤

過去老實說...我還真的不知道為什麼要用這個標籤來放文字= =...(一整個很弱)
但終於昨天在試作一些選單的點選時...才發覺到他的用處!!
依我實作後的心得，最直白的感覺就是；用label標籤幫你把input點選範圍加大!加大!加大!!當然，這是我發現他目前最好用的點

說真的，配合CSS真的好好用，使用上不止增加了使用體驗，而視覺樣式也能良好的呈現(配合CSS3)，方法也很簡單，以下就實做記錄一下，知道門道的路過神人們就請略過這篇吧~~(目前因為知道用這招而自嗨中)

首先，因為我在製作投票的選項，所以我會需要有；標題、複選框、單選框、選項、送出按鈕...等資訊

準備好html

<div class="vote">
  <h1>為什麼在智慧型手機上網路購物的人很少？你自己不在手機上買東西的原因是什麼？</h1>
  <span>投票至2012/12/31</span>
<ul>
  <li>
    <input type="checkbox" />
　<h2>操作不易，網站沒有專屬手機的介面</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>沒有手機</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>怕連線中斷</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>我只玩遊戲</h2>
  </li>
</ul>
<div><input value="送出" type="button"></div>
</div>

以上是一般已經可以提供基本投票選項項目的html

那麼該優化並加入label標籤?

將html修改成

<div class="vote">
  <h1>為什麼在智慧型手機上網路購物的人很少？你自己不在手機上買東西的原因是什麼？</h1>
  <span>投票至2012/12/31</span>
<ul>
  <li>
    <label for="vote_1">
        <input type="checkbox" id="vote_1"/>
　    <h2>操作不易，網站沒有專屬手機的介面</h2>
    </label>
  </li>
  <li>
    <label for="vote_2">
        <input type="checkbox"  id="vote_2"/>
　    <h2>沒有手機</h2>
    </label>
  </li>
  <li>
    <label for="vote_3">
        <input type="checkbox"  id="vote_3"/>
　    <h2>怕連線中斷</h2>
    </label>
  </li>
  <li>
    <label for="vote_4">
        <input type="checkbox"  id="vote_4"/>
　    <h2>我只玩遊戲</h2>
    </label>
  </li>
</ul>
<div><input value="送出" type="button"></div>
</div>

黃色部分是我們增加的部分，說明一下
label標籤屬性"for" ，此屬性可以針對相對的標籤id名稱做綁定
那麼在label標籤裡面的內容都是可以被點選啟動checkbox的範圍
如果我們再透過CSS設定，將label標籤設定為：

label{
　display:block;
　padding:10px;
}

那麼可點選的範圍又變大了，使用者在點選項目時，就可以不用這麼精準的去對準複選框，只要移入label範圍內，就可以點選了，我們只需要做一點點小小的改變，就能大大增加使用者體驗，這麼好用，不學嘛!?

(搞不好大家早就會了...)

什麼是CDN?

最近在找jQuery的版本時發現的一個新名詞(對我來說...)

之前有過因為在蒐尋主機伺服器，結果發現也貫上"CDN"名詞，當時並不以為意的說...
後來才又在搜尋jQuery中又聽到這個字

CDN是什麼?

CDN是Content Delivery Network(內容傳遞網路)的縮寫，運用機制將檔案複製到全球各地的區域性伺服器，當使用者需要內容時，可以依距離就近取得，縮短傳輸時間，提高系統運作的流暢性。近年來，JavaScript Library在網頁開發扮演的角色日益吃重，常常一個網頁中就要載入數十個js檔，且隨著JavaScript功能的豐富化，js檔也愈來愈肥，於是Google、Microsoft及一些廠商組織開始提供CDN式JavaScript來源。 

對於網頁開發者而言，傳統做法是將要引用的js檔下載統一放在網站的特定目錄下(例如: /inc, /js, /Scripts...)，現在則多了CDN的選擇，將網頁的<script>來源由../Scripts/jquery-1.7.2.min.js改成httq://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js後，使用者便可透過CDN的大頻寬快速下載js檔，若使用者先前拜訪其他網站已從該CDN下載過同一js，還可直接使用Cache中的暫存複本，連下載動作都省起來。如此一方面能改善網頁載入速度，一方面還可以減少自家網站流量，省下頻寬費用，除了檔案在自家掌握之外的不確定風險(自家網站的妥善率通常不比Google/Microsoft CDN高，所以不用太擔心，但不適合需客製化或指定特定版本的場合)，選用JavaScript Library CDN是不錯的策略。

以上內容轉貼至黑暗執行緒：http://blog.darkthread.net/post-2012-06-02-my-js-cdn-list.aspx

好物好物~
對於空間與頻寬吃緊的"個人"前端開發者來說，這絕對是最好的選擇(反正頻寬都吃大廠的阿哈哈哈)。

內容補充：http://ten2.tw/blog/amazon-cloudfront-cdn/

使用PIE讓IE7~8支援CSS 3 屬性

以目前來說...IE就算進步到IE10，但他下面的孩子們789還是不支援，當我需要使用漸層(或CSS3其他的語法)到IE的作法時，就會碰到那不支援，這不支援的...

於是網上找了一些解決方式，以下介紹一個我用了還蠻方便的作法(當然不是我寫的=  =)
不想看的可以直接看這裡：http://css3pie.com/about/

PIE (progressive internet explorer)

目前 CSS3 PIE 的支援語法
PIE currently has full or partial support for the following CSS3 features:

border-radius: 圓角
box-shadow: 區塊陰影
border-image
multiple background images
linear-gradient as background image: 漸層顏色
詳見: About PIE
註: CSS3 PIE 是使用 .htc 的 hack 方式
使用 CSS3 PIE 官方文件
Getting Started – CSS3 PIE: CSS3 decorations for IE


如何使用：
1.下載PIE
2.將你在ie上需要css3地方加入
"-pie-background: linear-gradient(#EEFF99, #66EE33);
 behavior: url(/PIE.htc);"
例如：
.boxGradient{
  border-radius: 2px;
  /*讓IE支援漸層的語法*/
-pie-background: linear-gradient(#fff, #e1e0dd);
behavior: url(pie/PIE.htc);
}

3.執行IE觀賞美麗的CSS3漸層

-------------------------------------------------------------------------
後記：
還真的有用!!
但IE7、8、9呈現出來的感覺還是有點不一樣，7跟8比較相近，9的陰影呈現跟圓角反而怪怪，大概有1px的差距


網路上的怪招真的很多........

參考網址：
http://css3pie.com/documentation/getting-started/
http://blog.longwin.com.tw/2010/07/favorite-css3-pie-2010/

//2012/6/5 補充
ie如果使用了PIE之後呢，在包覆這個樣式的外層DIV，就不能在設定background屬性，這樣會影響PIE的背景顯示，意思就是說，如果你有依靠PIE設定div的背景色，那包覆此div的外層div就不能另外設定背景色，裡面設定PIE的div會直接吃到外層的div的 background屬性。


解決方式：在pie外層加上position:relative與z-index:1樣式即可解決(目前是用此解決，如後續遇到問題在繼續補充)
參考pie3 Known Issues http://css3pie.com/documentation/known-issues/#relative-paths

//2012/7/4 補充
ie7還是出現了一大塊底色...這邊我就真的投降了...只好寫ie hack 放棄PIE了...希望有高手解答..
環境是php，作了一個a連結的按鈕讓user滑過時出現陰影的效果...

CSS3‧漸層

CSS3的漸層語法，在各瀏覽器的語法略有不同，分別說明如下：


Chrome / Safari 4+:


/*由上到下*/
background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));


/*由左至右*/
background:-webkit-gradient(linear, left top, right top, from(#00475E), to(#007276));


/*在Chrome 10 之後語法可簡化為:*/
background:webkit-linear-gradient(top, #00475E, #007276);


Firefox 3.6+
/*由上到下*/
background:-moz-linear-gradient(top, #00475E, #007276);


/*由左至右*/
background:-moz-linear-gradient(left, #00475E, #007276);


IE6~IE8
基本語法 
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); 


參數說明 
上下漸層GradientType=0 
左右漸層GradientType=1 
漸層起始色彩startcolorstr=# 
漸層結束色彩endcolorstr=# 




跨瀏覽器綜合語法
body {
        /*預設背景顏色, 讓不支援漸層的瀏覽器能呈現基本底色*/
        background: #278092;
        /******跨瀏覽器的底色漸層CSS語法 (由上到下)********/ 
        /*Chrome的語法*/
        background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));
        /*FireFox的語法*/
        background: -moz-linear-gradient(top, #00475E, #007276);
        
        /*IE6~IE8的語法*/
        filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #00475E, #007276);
        margin: 0px;
}
--------------------------------------------------------------
後記：
上述語法精我實際測試後，Opera沒有安裝..= =和除了ie的效果不知道為什麼出不來外
其他皆能呈現我要的效果測試OK


引用網站：
http://mepopedia.com/forum/read.php?844,17157,17157#.E4.B8.89.E3.80.81.E8.B7.A8.E7.80.8F.E8.A6.BD.E5.99.A8.E7.B6.9C.E5.90.88.E8.AA.9E.E6.B3.95
參考資料: 
CSS Tricks: http://css-tricks.com/examples/CSS3Gradient/ 
CSS3 Maker: http://www.css3maker.com/

簡易解決圖片置中問題(自認為....)

基本上...這只能解決有固定高度與寬的DIV內的圖片置中，如果不設定高度與寬度...就會無法呈現上下左右圖片置中問題...

可先參考此篇：http://www.cnblogs.com/shabingliang/archive/2008/09/15/1291115.html
(以上此篇隨邊找都能找到一模一樣的內容文章...真的是相似度極高阿...)

以下是我針對實作修改後的樣式


<style>
.photoLists { width:201px; height:134px; position:relative;}
.photoBox { position:absolute; left:-1px;}
.photoListImg { float:left; margin:1px; background:#CCC url(/img/album/photoBg.gif);}/*設定放圖片的樣式
.photoLists a {
 /*非IE的置中方法*/
 display: table-cell;
 vertical-align:middle;
 text-align:center;

 /*針對IE的hack */
 *display: block;
 *font-size:56px;/*約為高度的0.873，65*0.873 約為56 (PS1.要將放置圖片的div高度乘以0.873倍*/)
 *font-family:Arial;/*防止非utf-8引起的hack失效，如gbk編碼*/

 width:65px;
 height:65px;
 }
 .photoLists img {
 /*設置圖片置中*/
 vertical-align:middle;
 }

</style>

<div class="photoBox">

<div class="photoListImg">

<a href="#">

<img src="img.gif" width="50" height="50" />

</a>

</div>

</div>

--------------------------------------------------------------------------------

所以以上..解決了我在三大瀏覽器上的圖片置中問題
firefox、chrome、IE7.8.9 都OK

雖說有點怪招，卻很簡易....自己試了很久都試不出來，GOOGLE一下就試出來了

(GOOGLE真是神)

PS1.關於0.873是怎麼來的，上網又查了一下..說是："抓出特定字型在 IE font-size 和所產生行高的比例，然後就以此比例來算出要垂直置中 font-size 該設多少。他算出來字型 Arial 的比例是 0.873"....balabala..

可參考此篇：http://blog.xuite.net/vexed/tech/22551671

此篇還有額外的應用實例可參考(果然還是繁體好)

還有好多好多延伸閱讀...

但我很懶.......
很懶的打字
很懶的作編輯
..............................

........

...

好用的 CSS 工具：Less 介紹

這應該算是"怪招"嘛...

http://blog.eztable.com.tw/2011/11/18/introduction-to-less/