遇到一個bug蘋果手機彈出框用fixed定位，彈框內有input可編輯，當獲取光標后輸入或刪除文字時光標會錯位，找了很多資料沒有找到具體的解決辦法，最終將fixed定位改成absolute定位。并禁止屏幕滾動。整個代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style type="text/css">
.nn {
width: 100%;
height: 100%;
}
input {
border: none;
border: 3px solid;
border-color: pink;
}
p {
font-size: 12px;
transform:scale(0.875);
}
.crap {
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
padding-top: 0.1px;
}
.crap div {
width: 80%;
height: 100px;
padding-top:0.1px;
background-color: #FFF;
display: block;
margin: 0 auto;
margin-top: 200px;
}
.crap input {
border-color: red;
display: block;
margin: 0 auto;
margin-top: 10px;
}
.crap p {
background-color: #fff;
width: 100%;
text-align: center;
}
</style>
<body>
<div class="nn">
<ul>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<p class="btn">點我點我點我呀呀呀呀呀</p>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
<li>好的</li>
<li>好嗎</li>
<li class="active">好呀</li>
</ul>
</div>
<div class="crap">
<div class="color">
<input type="text" name="" id="" value="" />
<p class="noBtn">取消</p>
</div>
</div>
</body>
<script src="js/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.crap').css('display','none');
$('.btn').on('click',function() {
$('html').scrollTop(0)
$('body').css({'height':'100%','overflow':'hidden'});
$('html').css({'height':'100%','overflow':'hidden'})
$('.crap').css('display','block');
});
$('.noBtn').on('click',function() {
$('.crap').css('display','none');
$('body').css({'height':'auto','overflow':'scroll'})
$('html').css({'height':'auto','overflow':'scroll'})
});
$('.crap').on('touchmove',function(event) {
$('body').css('overflow','hidden')
event.stopPropagation()
})
</script>
</html>
