不過從ios5.1以來，fixed定位就已經支援了，但很遺憾，ios現在對它還只是半支援。
但是在某些情況下，會出現一些比較奇葩的問題，比如fixed元素中存在輸入框子元素，這個時候就會跪了。
可以看到，fixed定位的元素跑到中間去了，這種問題一般出現在頁面有scrolltop並且輸入框獲得了焦點的情況下！
怎麼解決這種問題呢？我目前知道的主要有三種辦法，假設html**結構為：
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
<
title
>fixed
title
>
<
style
>
header
style
>
head
>
<
body
>
<
header
><
input
type
="search"
placeholder
="請輸入搜尋詞"
/>
header
>
<
div
id="container"
>
div>
body
>
html
>
在輸入框獲得焦點時，將fixed改成absolute，並將top值設定為頁面此時的scrolltop，然後在輸入框失去焦點時，改回fixed。
function onfocus(e)function onblur(e)
此外我們還得做一些額外的處理，比如禁止頁面滾動，為啥要禁止滾動？
因為軟鍵盤彈起的時候，使用者還是可以滾動頁面的，一旦使用者往下滾動了頁面，header也隨著往下滾動了（因為此時它是absolute的）。
function ontouchmove(e) ;function onfocus(e)
function onblur(e)
這種方法基本能解決大部分需求，但是在輸入框有搜尋提示的時候也會掛，因為我們禁止了滾動，而搜尋提示通常應該要能往下滾動。
在輸入框的touchstart事件發生時，將fixed元素改成static，然後再將焦點focus到輸入框中，然後輸入框blur時，再將其設定成fixed:
input.addeventlistener('touchstart', function(e) , false);
input.addeventlistener('blur', function(e) , false);
這種方案的原理就是先將fixed元素改成static，這樣該元素就會回到頁面頂部（正常流），
然後呼叫輸入框的focus方法，將焦點移到輸入框中，此時頁面視角也會跳到頂部。
note: 優酷無線首頁現在就是這麼做的。
這種方案是將header和container都設定成absolute，然後只滾動container。
這種的方法主要依賴ios5.1以後提供的-webkit-overflow-scrollingcss屬性。
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
<
title
>fixed
title
>
<
style
>
header
#container
style
>
head
>
<
body
>
<
header
><
input
type
="search"
placeholder
="請輸入搜尋詞"
/>
header
>
<
div
id="container"
>
...
div>
body
>
html
>
這種方案也有坑，主要表現在：當軟鍵盤彈起時，使用者一旦滾動介面，整個文件都會滾動（包括header、container），fixed的效果就沒有了。
還有乙個更深的坑就是，在軟鍵盤彈起的時候，往上滾動頁面，header此時也會隨著往上滾，
然後收起軟鍵盤，container居然滾動不了（手指多移動幾次後，才能正常滾動）。
note: 這個問題不知道什麼原因，以後有發現再更新本文。
綜上，我還是喜歡使用第二種方案。
怎麼解決：搜尋網路，看其他產品是怎麼實現的；
使用方法4。
Sticky 黏性定位 相容性
1.sticky不會觸發bfc，2.z index無效，3.當父元素的height 100 時，頁面滑動到一定高度之後sticky屬性會失效。4.父元素不能有overflow hidden或者overflow auto屬性。5.父元素高度不能低於sticky高度，必須指定top bottom lef...
相容性（空格相容性）
在chrome與firefox下顯示的寬度不同，原因是兩個瀏覽器的預設字型不同，給html規定字型即可解決。下面有各種形式的空格，各有不同 不換行空格，按下空格鍵所產生的空格，受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...
相容性小結
1.不同瀏覽器的標籤預設的外補丁和內補丁不同。解決 2.chorme瀏覽器下字型最小12px 解決 font size 12px webkit transform origin x 0 webkit transform scale 0.5833333333333334 scale 12 3.ie瀏覽...