在行動裝置上，這個設定會無效，實際顯示背景也不會有fixed的效果，也就是背景不會固定，會跟著滑動，等於跟沒設定一樣的結果。

<a>總統府</a>

a{
height:1px;
overflow:hidden;
padding:30px 0 0 0;
background:url(image/icon.jpg);
}

以上設定在桌機呈現上 a是可以點選的，滑鼠移上去整個padding的區塊也會是有hover效果、也可以點擊的。但是換成行動裝置（手機、平板），點選icon會沒有反應。也就是在行動裝置上hover的範圍只有height:1px;不含padding的範圍。

改成以下在手機上就可以點

a{
height:31px;
overflow:hidden;
text-indent:-1000px;
background:url(image/icon.jpg);
}

就是還是要用縮排的方式隱藏文字。

能遇到這種bug也真神奇…簡單來說table使用border-collapse，的時候table設定虛線，在某些寬度底下看起來有些線段會變成實線。6px一個循環。參考文章見此 Chrome下的Border合并BUG

小正正網站有實作範例，先看範例：上下左右都置中的區塊。簡單說明實作方法（因為我要處理的主要是左右置中，上下置中的理論相同就不重複。

1. 由於fixed的定位是認瀏覽器，而不認父元素的position，所以先使用left:50%的方式。讓定位點定在瀏覽器的中間（也就是不管螢幕放到縮小，物件都會固定在瀏覽器的中間。
2. 然後再使用margin-left，設定負值拉回。因為如果畫面都要置中，一定都會將要置中的物件設定一個寬度，例如1000px，那這個時候只要向左拉回500px即可。
3. 因為我要處理的header我希望他寬度可以延伸，所以我設定的時候把總寬設定成2000px，因此往左要拉回1000px。

小正正有提供positioniseverything的網站，很值得參考喔！

有三種方法，這三種方法暫時不管IE的適用性，以firefox、google等較遵循W3C的瀏覽器來看。

1. overflow：
   優點是一行就可以解決。缺點是如果版面上有的元素的定位希望超出版面之外的時候，就會被隱藏
2. float：
   父元素設定寬度搭配float，缺點是父元素以外的東西要在加clear或用別的方式避免掉父元素float造成問題
3. after：
   設定方法如下（參考文章http://www.positioniseverything.net/easyclearing.html/），此處clearfix為父元素的class

     .clearfix:after {
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
       }
   缺點是比較囉嗦，但是如果定位要定在框框以外不會被隱藏，也能夠避免父元素設float造成的更多問題。

css3漸層語法產生器
http://www.colorzilla.com/gradient-editor/

css3圓角語法產生器
http://border-radius.com/

css3語法產生器（有更多語法，漸層跟圓角上述的比較好用）
http://www.css3maker.com/