【建議收藏】90%的前端都會踩的坑，你中了嗎？

寫在前面

移動開發時代，前端同窗剛剛送別了讓人頭禿的IE瀏覽器，卻發現憧憬已久的移動互聯網時代並非想象中那般美好。各類棘手的系統兼容問題和瀏覽器兼容問題怎麼也讓人高興不起來。做爲一名工做不足3年的前端程序媛，始終相信好記性不如爛筆頭。每次在項目開發過程當中踩到的坑，都習慣性地記錄了下來。昨日一瞥竟聚沙成塔，稍感詫異。所以分享出來，但願對你們能有所幫助。

樣式問題

一、父元素設置了border-radius，子元素應用了transform，而且父元素設置了overflow:hidden，可是卻失效？

// 給父元素設置 
{
    position:relative;
    z-index:1;
}
複製代碼

二、設置input 文本框的 placeholder 的顏色

input::-webkit-input-placeholder{
    color:rgba(144,147,153,1);
}
複製代碼

三、如何設置body背景色，height:100%,不生效？

同時設置html，body的高度

html,body{
    height:100%；
} 
或
body{
  height: 100vh; // 表明佔屏幕100%
}
複製代碼

四、一像素邊框的問題

.row {
  position: relative;
  &:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border-bottom:1px solid #e6e6e6;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止點擊觸發 */
    box-sizing: border-box;
  }
}
複製代碼

五、css屬性touch-action:none;

該屬性會致使安卓頁面沒法滾動，慎用!
複製代碼

六、去除ios 手機端input輸入框的內陰影

input{ 
    -webkit-appearance: none; 
}
複製代碼

七、安卓手機端div裏面在包一層div，文字展現不居中的問題。

最好給div設置padding ，不固定高度和不設置line-height；
複製代碼

八、iOS端input輸入框光標錯位

是因爲fixed定位引發的，改爲absolute就解決了。

.box{
    position: absolute; 
}
複製代碼

九、div實現背景色和背景圖片同時存在

{
    background-color: #fff;
    background-image:url('../../assets/img/model-bg.png');
    background-repeat: no-repeat;
}
複製代碼

十、css 製做橢圓

border-radius能夠單獨設置水平和垂直的半徑，只須要用一個斜槓（/）分隔這二個值就行。

此外咱們還要知道border-radius不只能夠接受長度值還能夠接受百分比值。

{
    width: 150px;
    height: 100px;
    border-radius: 50%/50%; //簡寫屬性：border-radius:50%
    background: brown;
}
複製代碼

十一、圖片居中顯示

object-fit: cover;
複製代碼

兼容問題

一、iconfont 字體在釘釘應用裏面加載不出來（或者是亂碼）的問題引入iconfont字體的時候，須要按照順序把字體依次引入。正確的順序以下：

@font-face {
    font-family: "djicon";
    src: url('./iconfont.eot'); /* IE9*/
    src: url('./iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */
    url('./iconfont.woff') format('woff'), /* chrome、firefox */
    url('./iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
// 參考文檔：https://www.cnblogs.com/Megasu/p/4305116.html
複製代碼

二、PC端ueditor 編輯的文案及圖片拉伸問題，背景是 後端返回是html片斷

node - cheerio模塊，操做dom字符串比較方便，實際案例：
解決了 PC端圖片在移動端展現的問題參考文檔：
www.jianshu.com/p/e6d73d8fa…
www.npmjs.com/package/che…

width: number = 784 表明pc端寬度 
regHtml(str: string){
    // 參數是html片斷 
    let _this = this; 
    const $ = cheerio.load(str);
    $('img').each(function(index,element){
        let attr = element.attribs //元素的屬性 
        // 屏幕寬度 
        let docEl = document.documentElement 
        let clientWidth = docEl.clientWidth
        if(attr.width){ //若是設置了寬
            // 圖片寬度/屏幕寬度的比例 
            let rate = attr.width /_this.width 
            //圖片的寬高比例 
            let wh = attr.width/attr.height 
            $(element).attr('height', _this.rate*clientWidth/wh)
            $(element).attr('width', _this.rate*clientWidth)
            $(element).attr('style', '') 
            $(element).attr('class', 'img-skew') 
        } 
    
    }) 
    return $.html() 
    
}
複製代碼

三、IOS 點擊input不聚焦問題。

ios系統中點擊Input輸入框，沒有反應，沒法彙集光標，調不起鍵盤。

解決方案：強制性給加上點擊事件，點擊後給input框彙集光標。

cilckTextarea(){
    document.getElementsByClassName('cont-inp')[0].focus();
},
複製代碼

四、上傳圖片，iPhone7 iPhone7p在上傳圖片的時候，傳不過去圖片的name

解決方案：手動添加圖片name

let data = new FormData();
data.append("fileName", file[0],file[0].name); 
複製代碼

五、ios微信打開網頁鍵盤彈起後頁面上滑，致使彈框裏的按鈕響應區域錯位

解決方案：手動把滾動條滾到底部寫一個自定義指令。

import Vue from 'vue';
Vue.directive('blur', {
    'bind'(el) {
        el.addEventListener("click", function(){
            window.scrollTo(0,0);
        })
    }
}); 
//在點擊頁面提交按鈕的時候，把滾動條滾到底部就OK了
複製代碼

六、微信瀏覽器調整字體後，頁面錯位。

解決方案：阻止頁面字體自動調整大小

// 安卓：
(function() {
  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    handleFontSize();
  } else {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    } else if (document.attachEvent) {
      //IE瀏覽器，非W3C規範
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    }
  }
  function handleFontSize() {
    // 設置網頁字體爲默認大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    // 重寫設置網頁字體大小的事件
    WeixinJSBridge.on('menu:setfont', function() {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    });
  }
})();

//iOS：
// ios使用-webkit-text-size-adjust禁止調整字體大小
body{-webkit-text-size-adjust: 100%!important;}
複製代碼

七、關於移動端樣式兼容的問題

• 設置meta標籤viewport屬性，使其無視設備的真實分辨率，直接經過dpi，在物理尺寸和瀏覽器之間重設分辨率，從而達到能有統一的分辨率的效果。而且禁止掉用戶縮放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
複製代碼

• 使用rem進行屏幕適配，設置好root元素的font-size大小，而後在開發的時候，全部與像素有關的佈局統一換成rem單位。

八、iOS下取消input在輸入的時候英文首字母的默認大寫

<input type="text" autocapitalize="none">
複製代碼

九、禁止 iOS 識別長串數字爲電話

<meta name="format-detection" content="telephone=no" />
複製代碼

十、禁止ios和android用戶選中文字

-webkit-user-select: none;
複製代碼

十一、一些狀況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發

只須要對不觸發click事件的元素添加一行css代碼便可：

cursor: pointer;
複製代碼

調試工具

一、Weinre遠程調試工具

簡單的步驟：

- 本地全局安裝weinre , 命令行：npm install -g weinre
- 在本地啓動一個檢測器：weinre --boundHost 1.2.3.4 （IP爲本地IP地址）
- 在瀏覽器訪問此地址：http://1.2.3.4:8080
- 把下面這一串東西，放在你須要調試的頁面裏：
<script src="http://1.2.3.4:8080/target/target-script-min.js#anonymous"></script>
- 點擊連接打開：http://1.2.3.4:8080/client/#anonymous
複製代碼

二、vconsole 日誌打印

import VConsole from 'vconsole'
var vConsole = new VConsole();
複製代碼

三、fiddler抓包也須要支持https

解決方案：fiddler須要安裝信任證書，手機也須要安裝信任證書，在瀏覽器裏面打開

http://1.2.3.4:8888 // 本地IP地址+端口號
複製代碼

四、charles 手機端抓包，須要安裝證書

手機瀏覽器輸入：chls.pro/ssl ，去下載證書。
手機-設置-安全與隱私-更多安全下載-從sd卡安裝證書 - 找到以前在瀏覽器下載的證書
複製代碼

vue相關問題

一、vue 如何獲取拉回數據後圖片的高度？

<img
    :src="userInfo.profilePicture"
    alt
    class="img-picture"
    v-if="userInfo.profilePicture"
    ref="myImg"
    @load="imageFn"
>
 imageFn() {
    console.log(this.$refs.myImg.offsetHeight);
    console.log(this.$refs.myImg.offsetWidth);
 },
複製代碼

二、vue中同一個dom節點，v-if與v-for不推薦同時使用，官方解答：

不推薦同時使用 v-if 和 v-for。 當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級

三、vue v-for 中更改item 屬性值後，v-show不生效的問題

添加this.$forceUpdate();進行強制渲染，效果實現。
由於數據層次太多，render函數沒有自動更新，需手動強制刷新。
複製代碼

四、這個離開守衛一般用來禁止用戶在還未保存修改前忽然離開。該導航能夠經過 next(false) 來取消

beforeRouteLeave(to, from, next) {
    if (to.path === '/votes/subject') {
        next('/task-list');
    } else {
        next();
    }
}
複製代碼

五、element UI 自定義傳參的解決方法

這裏的handleSelect默認綁定的參數是選中的那條數據。若是一個頁面有好幾個相同的組件，要想知道選的是哪一個？

<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="請輸入內容"
    @select="handleSelect"
></el-autocomplete>
複製代碼

解決方案：

<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="請輸入內容"
    @select="((item)=>{handleSelect(item, index)})"
    // 寫個閉包就能夠了，index表示第幾個組件
></el-autocomplete>
複製代碼

六、element-UI 框架 el-input 觸發不了 @key.enter事件

<el-input v-model="form.loginName" 
placeholder="帳號" 
@keyup.enter="doLogin">
</el-input>
複製代碼

解決方案：使用@key.center.native

<el-input v-model="form.loginName"
placeholder="帳號" 
@keyup.enter.native="doLogin">
</el-input>
複製代碼

最後

以上就是前端小姐姐這兩年小本本上總結的全部東西了，固然相信我們的前端道友們都是見過大風大浪的，歡迎在評論區交流，分享本身的寶貴經驗！o(￣︶￣)o

關注咱們