若是絕對定位的元素在最下面,鍵盤彈起時,絕對定位元素會在鍵盤上面html
解決辦法:web
export function adapterPosition(selector) { if (/iphone/i.test(navigator.userAgent)) return const h = window.innerHeight; const dom = document.querySelector(selector) if (!dom) return const display = dom.style.display window.addEventListener('resize', () => { const height = window.innerHeight if (height < h) { dom.style.display = 'none' } else { dom.style.display = display } }); }
具體緣由待查,反正須要給input加一個display:block瀏覽器
<div class="item"> <div class="name">驗證碼</div> <input class="jInput input" type="number" pattern="[0-9]*" placeholder="請輸入短信驗證碼"> <button class="btn jSendVcodeBtn"> 發送驗證碼 </button> </div>
.item { margin-left: 15px; box-sizing: border-box; height: 60px; padding: 12px 15px 12px 0; overflow: hidden; background-color: #fff; color: #212121; position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; border-bottom: 1px solid #f4f4f4; font-size: 16px; } .item .name { margin-right: 10px; min-width: 48px; } .item .input { display: block; // 須要加一個display:block outline: 0 none; -webkit-box-flex: 1; flex: 1; font-size: 16px; padding: 0; border-width: 0; box-shadow: none; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
關於relative元素top屬性失效的緣由,父元素沒有設置高度,子元素top使用百分比的時候沒有參照,此時能夠使用px值dom
描述:有場景須要mask,可是背景仍是能夠滾動,即滾動穿透,解決方案以下,主要是獲取頁面的滾動元素並設置其爲fixediphone
body.no-scroll { position: fixed; width: 100%; }
UtilFn.ModalHelper = function (bodyCls) { var scrollTop; var scrollingElement = document.scrollingElement || document.body; // 此寫法兼容webkit,獲取頁面滾動元素 return { afterOpen: function () { scrollTop = scrollingElement.scrollTop; document.body.classList.add(bodyCls); document.body.style.top = -scrollTop + 'px'; }, beforeClose: function () { document.body.classList.remove(bodyCls); scrollingElement.scrollTop = scrollTop; } }; }
參考 http://web.jobbole.com/84113/佈局
瀏覽器會對小數點進行四捨五入,實際渲染是四捨五入以後的,可是真實佔用空間是原始大小,四捨五入的那部分值會影響下一個flex