既然在 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么 假如——页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。
那么按照这个思路，如果使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变，代码如下：
<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</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 {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}
main .content {
height: 2000px;
}转自：http://efe.baidu.com/blog/mobile-fixed-layout/?utm_source=tuicool&utm_medium=referral
还有国外的一些解决方案：
Add an empty optgroup at the end of the select list:
<select> <option selected="" disabled="">Select a value</option> <option>Grumpy wizards make toxic brew for the evil Queen and Jack</option> <option>Quirky spud boys can jam after zapping five worthy Polysixes</option> <option>The wizard quickly jinxed the gnomes before they vaporized</option> <option>All questions asked by five watched experts amaze the judge</option> <optgroup label=""></optgroup> </select>
转自：http://stackoverflow.com/questions/19398154/how-to-fix-truncated-text-on-select-element-on-ios7
-webkit-sticky
