做touchweb開發的時候，做頭疼的是，電腦上面時候好的，有些手機上面也是好的，個別手機和瀏覽器出現問題，對于這些，只能慢慢調試，找問題。
今天說一下比較老的IOS的問題，那就是“iOS下的 Fixed + Input 調用鍵盤的時候fixed無效問題”。
<body class="layout-fixed"> <!-- fixed定位的頭部 --> <header> </header> <!-- 可以滾動的區域 --> <main> <!-- 內容在這里... --> </main> <!-- fixed定位的底部 --> <footer> <input type="text" placeholder="Footer..."/> <button class="submit">提交</button> </footer></body>對應的樣式如下：
header, footer, main { display: block;}header { position: fixed; height: 50px; left: 0; right: 0; top: 0;}footer { position: fixed; height: 34px; left: 0; right: 0; bottom: 0;}main { margin-top: 50px; margin-bottom: 34px; height: 2000px}然后看起來就是下面這個樣子。拖動頁面時 header 和 footer 已經定位在了對應的位置，目測沒問題了。
但接下來問題就來了！如果底部輸入框軟鍵盤被喚起以后，再次滑動頁面，就會看到如下圖所示：
我們看到 fixed 定位好的元素跟隨頁面滾動了起來… fixed 屬性失效了！
這是為什么呢？簡單解釋下： > 軟鍵盤喚起后，頁面的 fixed 元素將失效（即無法浮動，也可以理解為變成了 absolute 定位），所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。
這便是 iOS 上 fixed 元素和輸入框的 bug 。其中不僅限于 type=text 的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題。
雖然 isScroll.js 可以很好的解決 fixed 定位滾動的問題，但是不在萬不得已的情況下，我們盡量嘗試一下不依賴第三方庫的布局方案，以簡化實現方式。這里拋磚引玉作為參考。
解決思路
既然在 iOS 下由于軟鍵盤喚出后，頁面 fixed 元素會失效，導致跟隨頁面一起滾動，那么假如——頁面不會過長出現滾動，那么即便 fixed 元素失效，也無法跟隨頁面滾動，也就不會出現上面的問題了。
那么按照這個思路，如果使 fixed 元素的父級不出現滾動，而將原 body 滾動的區域域移到 main 內部，而 header 和 footer 的樣式不變，代碼如下：
<body class="layout-scroll-fixed"> <!-- fixed定位的頭部 (absolute絕對定位也可以)--> <header> </header> <!-- 可以滾動的區域 --> <main> <div class="content"> <!-- 內容在這里... --> </div> </main> <!-- fixed定位的底部 （absolute絕對定位也可以）--> <footer> <input type="text" placeholder="Footer..."/> <button class="submit">提交</button> </footer></body>header, footer, main { display: block;}header { position: fixed;//或者absolute height: 50px; left: 0; right: 0; top: 0;}footer { position: fixed;//或者寫成absolute height: 34px; left: 0; right: 0; bottom: 0;}main {/* main絕對定位，進行內部滾動 */position: absolute;top: 50px;bottom: 34px;/* 使之可以滾動 */ overflow-y: scroll; /* 增加該屬性，可以增加彈性，是滑動更加順暢 */ -webkit-overflow-scrolling: touch; }main .content { height: 2000px;}另外，這里的 header 和 footer 使用的是 fixed 定位，如果考慮到更老一些的 iOS 系統不支持 fixed 元素，完全可以把 fixed 替換成 absolute 。測試后效果是一樣的。
按照上面布局，就不會出現問題了！
另外一種方案
新聞熱點
疑難解答
