記錄自己在h5頁面中遇到的坑

雖然自己在開發中主要以開發web頁面為主，但是也不乏做一些移動端頁面。

在開發頁面過程中就會遇到很多意想不到的坑 ， 是以在這記錄下來。

1 。 在開發中遇到背景放置一個長的背景圖   ， 将他絕對定位 給寬高 ， 給body加個overflow:hidden;  給圖檔加overflow-y：scroll; 實作了  但是在滾動到最底部以後發現圖檔下面留有一小塊空白，，蛋疼，，，，最後解決辦法  給img标簽 加了個屬性 display:block;;

2 。 需要在頁面絕對定位一個div.  position:fixed ;;于是乎定位到距螢幕某個固定的位置了

但是不要高興得太早啊，當你去拖動手機螢幕的時候你就會發現絕對定位的這個元素會在滑動的時候會晃動

非常不友好，，也是百度解決的在這記錄一下。

第一種辦法 給絕對定位的元素添加css樣式

-webkit-transform:translateZ(0)

第二種辦法

html, body {height:100%;overflow:auto;margin: 0;}
           

能會導緻原來的頁面布局出現問題，慎重。我

3 在當背景圖檔是一張大圖的時候  點選一下圖檔的時候會出現預覽圖  這樣也是很不友好的

于是乎  給放圖檔的容器加一個點選事件  οnclick="return false;" 阻止一下預設行為

總之在進行移動端頁面布局的時候坑還是很多的 在這記錄一下 後續會一直更新的