前端頁面佈局常見問題/已踩過的坑大雜燴

目錄

1、IE8下[圖片加文字]展現時自動換行的問題
2、設置了z-index無效
3、當文字超出範圍時自動補...省略號
4、實現垂直居中
5、實現無縫十字邊框
6、Iphone APP Webview中 A標籤失效問題
7、Iphone/Android APP Webview中 H5頁面與APP如何進行數據交互
8、如何能讓H5頁面適應全部分辨率的手機
9、IOS iphone/ipad safari 微信瀏覽器在input focus彈出輸入法時 position:fixed失效問題
10、如何用CSS修改HTML5 input/textarea的 placeholder的文字顏色
11、ios中input被默認加上了圓角問題
12、marquee標籤無js實現各類文字滾動代碼(適用公告)
十3、修改滾動條樣式
十4、REM部局時，元素設的height與line-height在安卓瀏覽器中出現誤差問題
十5、在APP中，解決webview中h5樣式或者js緩存問題
十6、新版的安卓版微信內置瀏覽器在鍵盤彈出時不會觸發resize動做，致使遮擋住輸入框問題 
十7、移動端近似解決1像素邊框問題
十8、用rem設備圖片背景時會出現圖片邊邊被截狀況
十9、小米4c系列，對input類型的按鈕點擊不了/點擊沒響應的問題
二10、CSS3水平陰影、豎直陰影
二11、華爲手機虛擬鍵盤擠壓屏幕高度
二12、微信長按識別二維碼只針對img有效，圖片背景無效，並且同屏有兩二維碼時，只能識別第一個
二十3、Flex流式部局
二十4、進度條
二十5、CSS3文字描邊
二十6、去掉ios默認給input加上的圓角
二十7、CSS3背景色漸變
二十8、CSS3內發光、外發光
二十9、IOS Webview中的h5頁面上除A標籤外的其餘dom元素要作成可點擊必需加上cursor: pointer樣式
三10、魅族 Webview中的h5頁面獲取到的屏幕寬度不許的問題
三11、華爲自帶瀏覽器 不支持流式佈局
三12、transition動畫中用left製做動畫可能會出現卡卡的不流暢
三十3、像素pixel轉rem和Rem轉像素pixel
三十4、CSS3 :nth-child(n) 選擇器和:nth-of-type() 選擇器
三十5、IOS webview高度不許確把h5底部截掉/IOS APP webview中的h5頁面中的fixed在底部的dom元素顯示不全或者被截掉不顯示問題。
三十6、兼容微信音頻播放。
三十7、相鄰帶背景圖的兩個元素，用負數margin會出現背景疊加。
三十8、background-size設爲100% auto時repeat背景在部分華爲手機沒效問題。
三十9、彈框裏的滾動條滾動時，外部body也跟着滾動的問題。
四10、Rem單位設置的小圓圈在安卓手機上不圓的問題。
四11、在ios的webview中使用fixed在頂部的內容致使下拉刷新被阻擋問題
四12、web中彈出彈框後，要求滾動彈框內容時，背景元素不能滾動，關閉彈框後要求背景元素位置保持不變解決方案
四十3、overflow:auto及overflow:scroll的區別
四十4、H5,CSS3,js動畫FPS(幀頻)要達到60纔不會感受到卡
四十5、如何使用HSL(H,S,L)來設置顏色？
四十6、pointer-events，一個神奇的css屬性
四十7、CSS3屬性-webkit-font-smoothing字體抗鋸齒渲染
四十8、white-space 屬性設置按內容的空白及換行原樣顯示
四十9、數字badge由圓圈到圓角橢圓自動伸長技巧
五10、移動端h5頁面必須重置的樣式及meta設置
五11、指定SVG元素path的渲染模式:shape-rendering
五12、解決ios下的微信打開的頁面背景音樂沒法自動播放
五十3、iphoneX安全區域問題
五十4、flex-wrap: wrap相對較舊版本手機自帶瀏覽器不換行問題如何解決？
五十5、段落縮進及字間間距樣式:text-indent及letter-space
五十6、flex佈局子元素在低版本安卓機上justify-content:space-between失效問題
五十7、如何解決移動端hover的問題？
五十8、寫向上滾動動畫時使用僞元素用做漸變透明遮罩圖層時會出現底邊閃爍問題
五十9、給tbody設置transform屬性致使thead的z-index 無效問題?
六10、web font-size選擇，web設計稿寬度通用選擇
六11、iPhoneX適配問題

1、IE8下[圖片加文字]展現時自動換行的問題

問題以下圖所示：

Html代碼以下：

<div class="flag">
     <img src="static/img/flags/f_2.png"> 免稅倉發貨 </div>

CSS樣式

.flag { position: absolute; top: 10px; right: 10px;
} .flag img { width: 20px; max-width: 100%;
}

IE8下文字自動換行，其餘瀏覽器都沒問題

解決方案以下：

max-width: 100%; -> max-width: none;

2、設置了z-index無效

設置元素的樣式中，position屬性值爲absolute、relative或fixed時，用z-index設置層疊位置纔有效。且屬性參數值越大，則該元素被層疊在最上面。

3、當文字超出範圍時自動補...省略號

１、CSS2只能實現單行補略

overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;

二、CSS3能夠實現多行補省略號,以下面3行補省略,注意控制好height與line-height

overflow: hidden;
text-overflow: ellipsis;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-line-clamp: 3;
-webkit-line-clamp: 3;
line-clamp: 3;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;

4、實現垂直居中

水平居中的話，行級元素用text-align:center；塊級元素用margin:0 auto就能夠實現水平居中。垂直居中則以下：

注意：這些方法對img有時不生效，若是考慮到圖片的垂直居中問題儘量把圖片切出居中圖，也就是上下相等的透明區域就好了。

一、CSS2實現

1.一、行級元素

/**方式1**/
/**通常來講，直接把父元素的height與line-height設成同樣就能夠**/
height:200px;
line-height: 200px;

/**方式2**/
/**父元素**/
height:200px;
/**子元素，如img圖片**/
vertical-align: middle;

 注意小圖片若是用rem做爲單位時，在安卓機上相對於父元素很難作到上下左右居中，這時能夠用絕對定位處理

<!--文字上下居中對齊-->
<div class="parent"><b class="child">38</b>元</div>
<style>
.parent{
      font-size: 48px;
      height: 100px;
      line-height: 100px;
      text-align: center;
}
.child{
      font-size: 80px;
      vertical-align: top; /* 這裏要設頂對齊*/
}
</style>

 

1.二、行級/塊級通用

/**方式1用table模型**/
/*父元素*/
display: table;
/*子元素*/
display: table-cell;
vertical-align: middle;

/**方式2－絕對定位**/
/*父元素*/
position: relative;
/*子元素*/
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;

/**方式3-絕對定位:等高底padding**/
/*父元素*/
position: relative;
/*子元素*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;

 

二、CSS3實現

2.一、行級/塊級通用設置父元素,box-pack設置水平方向，值爲start/center/end/justify；box-align設置垂直方向，值爲start/center/end/baseline/stretch

/*******父元素*******/
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

2.二、定位方式使上下左右居中

/*父元素要設position:relative;*/

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

 5、實現無縫十字邊框

　一、用border實現，樣板以下：

/***技巧就是每一個框設個-1的margin***/
border: 1px solid #ddd;
margin-bottom: -1px;
margin-left: -1px;

 二、用margin實現，樣板以下：

主要實現代碼以下：

<div class="container">
   <div class="row clearfix">
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
   </div>
   <div class="row clearfix">
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
   </div>
</div>
<style>
/**容器,內容部分爲100,其他15爲margin-right**/
.container{
width:115px;
overflow:hidden;
}
/**行總長120，但可顯示部分115，超出部分被hidden**/
.row {
    width: 120px;
}
/**每一個25，margin-right:5**/
.column4{
    float:left;
    background-color:#fff;
    width: 25px;
    height: 25px;
    margin-right: 5px;  
    margin-bottom: 5px;  
}
</style>

 6、Iphone APP Webview中 A標籤失效問題

給a標籤加上手勢就能夠解決

a{cursor:pointer;}

 7、Iphone/Android APP Webview中 H5頁面與APP如何進行數據交互

主要是APP端定義好接收事件js接口,而後H5頁面調用js函數傳數據，以下：

   <div class="item">
        <div class="img" data-url="http://www.baidu.com">
            <img src="http://www.abc.com/a.jpg">
        </div>
    </div>
    <script>
        function sendToApp(val) {//發送數據給APP var str = val;
            //console.log(str);
            inAppjs.runOnJavaScript(str);//app定義好的接收數據函數
        }
        $(document).on('click', '.img', function () {
            var url = $(this).attr('data-url');
            var _val = '{"type":2,"url":"' + url + '","value":""}';//app接收的是json格式的數據，但以string格式傳送
            sendToApp(_val);
        });
    </script>

8、如何能讓H5頁面適應全部分辨率的手機

方式<1>、若是是viewport已經寫好的舊項目，以下面的viewport已經定義好爲物理寬度，不想大改，則只寫media query進行修改，對設計圖進行非高保真輸出

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

 

    /*兼容處理*/
    @media screen and (min-width: 320px) and (max-width:359px) {
       /*下面填寫iphone 4/5樣式*/ 
       
    }

    @media screen and (min-width: 360px) and (max-width:374px) {
        /*下面填寫其餘小屏android手機樣式*/ 
    }

    @media only screen and (min-width: 375px) and (max-width:413px) {
　　  /*下面填寫iphone 6樣式*/ 
    }

    @media only screen and (min-width: 414px) and (max-width:479px) {
        /*下面填寫iphone 6 plus樣式*/ 
    }

方式<2>、使用起來很是順手，用rem做爲單位進行開發自適應頁面，固然最好結合less或者sass進行開發，定義好pix轉rem函數，否則每次都要進行單位的計算把px轉換成爲rem；現以UI圖寬750px爲例子，則能夠這樣進行開發，基本上對設計圖進行高保真輸出，但沒解決多倍像素輸出1px問題，但我的以爲已經夠用

也是使用1比1viewport

 

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

 

JS動態設置html根元素的font-size　

!function () {
    function setMeta() {
        var isMobile = {
            UCBrowser: function () {
                return navigator.userAgent.match(/UCBrowser/i);
            },
            MicroMessenger: function () {
                return navigator.userAgent.match(/MicroMessenger/i);
            },
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iPad: function () {
                return navigator.userAgent.match(/iPad/i);
            },
            iPhone: function () {
                return navigator.userAgent.match(/iPhone/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPod|iPad/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };
        var screenW = window.screen.width,
        dpr = window.devicePixelRatio;
        if (isMobile.UCBrowser() || (isMobile.MicroMessenger() && !isMobile.iPhone())) {//手機UC或者非iphone的手機微信
            if(screenW >　610){          
            　document.querySelector('html').style.fontSize = screenW / dpr / 10 + 'px';
            }else{//針對特殊狀況進行處理，如魅族手機在手機微信裏面打開
            　document.querySelector('html').style.fontSize = screenW/10 + 'px';
            }           
            if (!isMobile.any()) {//電腦版的微信
                document.querySelector('html').style.fontSize = 75 + 'px';
            }
        } else if (isMobile.iPhone()) { //iphone
            document.querySelector('html').style.fontSize = screenW / 10 + 'px';

        } else if (isMobile.iPad()) {//ipad
            document.querySelector('html').style.fontSize = 75 + 'px';

        } else if (isMobile.any()) {

                 if (screenW / 10 > 70) {//Mobile QQ
                    document.querySelector('html').style.fontSize = screenW / dpr / 10 + 'px';
                 }else{
                    document.querySelector('html').style.fontSize = screenW / 10 + 'px';
                 }

        } else {
            if (window.innerWidth <= 750) {
                document.querySelector('html').style.fontSize = window.innerWidth / 10 + 'px';
            }
            else
               document.querySelector('html').style.fontSize = 75 + 'px';
        }
    }
    setMeta();
    window.onresize = function () {
        setMeta();
    }
}()

 

方式<３>、沒定義Viewport狀況下，則比較麻煩的要判斷-webkit-min-device-pixel-ratio

/*兼容處理*/
    @media screen and (min-width: 320px) and (max-width:359px) {
       /*下面填寫iphone 4/小屏android手機*/ 
       
    }
    @media screen and (min-width: 320px) and (max-width:359px) and (-webkit-min-device-pixel-ratio : 2) {
       /*下面填寫iphone 4s/5/5s樣式*/ 
       
    }
    @media screen and (min-width: 360px) and (max-width:374px) {
        /*下面填寫360－374小屏android手機樣式*/ 
    }

    @media only screen and (min-width: 375px) and (max-width:413px) {
　　  /*下面填寫375－413小屏android手機樣式*/ 
    }

    @media only screen and (min-width: 375px) and (max-width:413px) and (-webkit-min-device-pixel-ratio : 2)  {
　　  /*下面填寫iphone 6樣式*/ 
    }

    @media only screen and (min-width: 414px) and (max-width:479px){
        /*下面填寫414－479大屏android手機樣式*/ 
    }

    @media only screen and (min-width: 414px) and (max-width:479px) and (-webkit-min-device-pixel-ratio : 3)  {
        /*下面填寫iphone 6 plus樣式*/ 
    }

    @media only screen and (min-width: 480px){
　　  /*下面填寫其餘大屏android手機樣式*/ 
    }

9、IOS iphone/ipad safari 微信瀏覽器在input focus彈出輸入法時 position:fixed失效問題

 if (navigator.userAgent.match(/iPhone|iPod|iPad/i)) {//只要把position設爲absolute就能夠了
       $(fixedObj).css("position","absolute");
 }

10、如何用CSS修改HTML5 input/textarea的 placeholder的文字顏色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:    #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:    #666;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:    #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:    #666;
}

11、ios中input被默認加上了圓角問題

input {
    border-radius: 0;
}

12、marquee標籤無js實現各類文字滾動代碼(適用公告)

各參數詳解：
a)scrollAmount。它表示速度，值越大速度越快。若是沒有它，默認爲6，建議設爲1～3比較好。
b)width和height，表示滾動區域的大小，width是寬度，height是高度。特別是在作垂直滾動的時候，必定要設height的值。
c)direction。表示滾動的方向，默認爲從右向左：←←←。可選的值有right、down、up。滾動方向分別爲：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，這也是用來控制速度的，默認爲90，值越大，速度越慢。一般scrollDelay是不須要設置的。
e)behavior。用它來控制屬性，默認爲循環滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，而後中止滾動)
f)loop。loop="2"滾動2次、loop="infinite"或者loop="-1"無限循環滾動
g)hspace和vspace。決定滾動矩形區域距周圍的空白區域

還能夠在標籤內插入圖片、表格、flash和marquee自身

例子以下：

　　

十3、修改滾動條樣式

/**webkit瀏覽器**/
    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }

　　

十4、REM部局時，元素設的height與line-height在安卓瀏覽器中出現誤差問題

    over-flow:hidden;
    line-height: 0.36rem;
    height: 0.72rem;/**表現出來若是文字超2行在某些安卓機會沒徹底遮住第三行文字問題**/

解決辦法：只能把height調略小一點

十5、在APP中，解決webview中h5樣式或者js緩存問題

解決辦法：若是要對已上線的頁面中的js和css樣式作修改，最好是直接寫到頁面中來解決APP緩存不更新問題

十6、新版的安卓版微信在鍵盤彈出時不會觸發resize動做，致使遮擋住輸入框問題

 

 

    // 1. 參考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
    //    Android 手機下, input 或 textarea 元素聚焦時, 主動滾一把
    if (/Android/gi.test(navigator.userAgent)) {
        window.addEventListener('resize', function () {
            if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
                window.setTimeout(function () {
                    document.activeElement.scrollIntoViewIfNeeded();
                }, 0);
            }
        })
    }

 

下面方法已失效

解決辦法：彈出鍵盤時用margin把可視區蹭高50%的高度咯，收回鍵盤時再恢復margin，捕獲focus和blur事件

      function isAndroidNewWechat() {//判斷是否爲新版微信瀏覽器
            var isMobile = {
                UCBrowser: function () {
                    return navigator.userAgent.match(/UCBrowser/i);
                },
                MicroMessenger: function () {
                    return navigator.userAgent.match(/MicroMessenger/i);
                },
                Android: function () {
                    return navigator.userAgent.match(/Android/i);
                },
                BlackBerry: function () {
                    return navigator.userAgent.match(/BlackBerry/i);
                },
                iPad: function () {
                    return navigator.userAgent.match(/iPad/i);
                },
                iPhone: function () {
                    return navigator.userAgent.match(/iPhone/i);
                },
                iOS: function () {
                    return navigator.userAgent.match(/iPhone|iPod|iPad/i);
                },
                Opera: function () {
                    return navigator.userAgent.match(/Opera Mini/i);
                },
                Windows: function () {
                    return navigator.userAgent.match(/IEMobile/i);
                },
                any: function () {
                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                }
            },
            result = false;
            if (isMobile.Android() && isMobile.MicroMessenger()) {
                var wv = navigator.userAgent.match(/MicroMessenger\/\d+\.\d+\.\d+/i)[0],
                wvv = 0;
                try {
                    if (wv) {
                        wvv = parseInt(wv.replace("MicroMessenger/", "").split(".").join(""));
                        if (wvv >= 6315) {
                            result = true;
                        }
                    }
                } catch (e) {
                    result = true;
                }
            }
            return result;
        }

應用實例-fixed在底部的評論框

            //點擊發評論
            var isANW = isAndroidNewWechat();
            $("#dd_comment_btn,#dd_comment").click(function () {
                var This = $("#comment-box-bt");
                This.toggleClass("hide");
                if (!This.hasClass("hide")) {
                    if (navigator.userAgent.indexOf('iPhone') > -1) {//修復iphone bug
                        $("#gd_bottom_fixed_menu").css("position", "absolute");
                    }else if (isANW) {//修復新版微信瀏覽器bug
                        $("#gd_bottom_fixed_menu").css("bottom", $(window).height() / 2 + "px");
                    }
                    This.find("#comment").focus();
                } else {
                    if (navigator.userAgent.indexOf('iPhone') > -1) {//修復iphone bug
                        $("#gd_bottom_fixed_menu").css("position", "fixed");
                    } else if (isANW) {//修復新版微信瀏覽器bug
                        $("#gd_bottom_fixed_menu").css("bottom", 0);
                    }
                }
            });
            $("#comment").focus(function () {
                if (isANW) {//修復新版微信瀏覽器bug
                    $("#gd_bottom_fixed_menu").css("bottom", $(window).height() / 2 + "px");
                }
            });
            $("#comment").blur(function () {//修復iphone bug
               setTimeout(function () {
                    if (navigator.userAgent.indexOf('iPhone') > -1) {
                        $("#gd_bottom_fixed_menu").css("position", "fixed");
                    } else if (isANW) {//修復新版微信瀏覽器bug
                        $("#gd_bottom_fixed_menu").css("bottom", 0);
                    }
               }, 100);
            });

 

十7、移動端近似解決1像素邊框問題[已優化]

參考自：http://weui.github.io/weui/weui.css

移動端若是頭部設了

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

則若是給元素設1px的邊框，不一樣dpr比率的手機表現出來的邊框都不同，dpr爲2時1px邊框看上去是2px，同理3時就是3px，能夠用如下辦法畫出近似1px的邊框：

.border-bottom {
    position: relative;
}

.border-bottom::after { /* 其餘的也相似 */
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    -webkit-transform-origin: 0 bottom;
    transform-origin: 0 bottom;
    background-color: #000;
}

現在市面上大部分手機都是高清屏DRP基本都是大於1，解決辦法就是經過transform:scale(0.5)來把1像互的線縮小一半讓線看上去細小一點

 

十8、用rem設備圖片背景時會出現圖片邊邊被截狀況

處理方法是直接把width和height設大1個單位，background-size不變

 

十9、小米4c系列，對input類型的按鈕點擊不了/點擊沒響應的問題

處理方法是給input增長display爲block或者inline-block就能夠了

 

二10、CSS3水平陰影、豎直陰影

.v_shadow{    
    box-shadow: 0 4px 3px rgba(0,0,0,0.25);
}
.h_shadow{    
    box-shadow: 4px 0px 3px rgba(0,0,0,0.25);
}

 

二11、華爲手機虛擬鍵盤擠壓屏幕高度

滿屏頁面，設計時考慮元素不能擠太滿

 

二12、微信長按識別二維碼只針對img有效，圖片背景無效，並且同屏兩二維碼，只能識別第一個

解決方案：能夠給每一個二維碼添加點擊彈出單獨的放大二維碼圖片遮罩事件

 

二十3、流式部局

部局和設計時要考慮

Flex 佈局教程：實例篇

經常使用方式：

/**父元素**/
display: flex;
align-items: center;
justify-content: center;

display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;


/**子元素**/
flex: auto;

flex: none;

 

　　

二十4、進度條

 html代碼：

                <div class="progress">
                    <div class="progress_bar active" style="width:5%"></div>
                </div>

sass代碼：

    .progress {
        width: 100%;
        height: r(10);
        overflow: hidden;
        border-radius: r(5);
        background-color: #ccc;
        position: relative;
        margin-top: r(25);

        .progress_bar {
            position: absolute;
            z-index: 2;
            height: r(10);
            width: 0;
            top: 0;
            left: 0;
            border-radius: r(5);
            background-color: #ccc;
            -webkit-transition: width 1s ease-in;

            &.active {
                background-color: #f93136;
            }
        }
    }

　　

二十5、文字描邊

text-shadow: 3px 3px 3px #720005, -3px -3px 3px #720005,3px 0 3px #720005,0 3px 3px #720005,0 -3px 3px #720005, -3px 0 3px #720005;

　　

二十6、去掉ios默認給input加上的圓角

input[type="number"],input[type="text"]{
    border-radius:0;
}

　　

二十7、CSS3背景色漸變

   background: linear-gradient(to bottom, #fff 0%,#bbb 100%);

　　

二十8、CSS3內發光、外發光

-webkit-box-shadow: 0 0 50px rgba(40, 0, 2, 0.50); /*外陰影或外發光*/
-webkit-box-shadow: inset 0 0 50px rgba(91, 0, 4, 0.5); /*內陰影或內發光*/

　　

二十9、IOS Webview中的h5頁面上除A標籤外的其餘dom元素要作成可點擊必需加上cursor: pointer樣式

 

.clickable {
　　cursor: pointer;
}

 

三10、魅族 Webview中的h5頁面獲取到的屏幕寬度不許的問題

解決方案：讓APP把屏寬以參數的形式轉給H5。 

 

三11、華爲自帶瀏覽器 不支持流式佈局

解決方案：使用普通的佈局方式。　

 

三12、transition動畫中用left製做動畫可能會出現卡卡的不流暢

解決方案：使用translate3D方式製做動畫就能夠了。　

 

三十3、像素pixel轉rem和Rem轉像素pixel

        function p2R(pixel, mock_width_px, mock_width_rem) { // 像素轉REM
            var mock_width_px = mock_width_px || 750, // UI設計圖的寬度 (pixel)
                mock_width_rem = mock_width_rem || 10; // UI設計圖的寬度 (rem)
            return parseFloat((pixel * mock_width_rem / mock_width_px).toFixed(3)) + 'rem';
        }
        function r2P(rem, mock_width_px, mock_width_rem) { // REM轉像素
            var mock_width_px = mock_width_px || 750, // UI設計圖的寬度 (pixel)
                mock_width_rem = mock_width_rem || 10; // UI設計圖的寬度 (rem)
            return parseFloat((rem * mock_width_px / mock_width_rem).toFixed(3)) + 'px';
        }

　　

三十4、CSS3 :nth-child(n) 選擇器和:nth-of-type() 選擇器

:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素（由１開始，不是０），不論元素的類型。n能夠是odd、even、數字或者 公式 an + b（n 是計數器，從 0 開始，b 是偏移值）。

:nth-of-type(n) 選擇器，該選擇器選取父元素的第 N 個指定類型的子元素（由１開始，不是０）。n能夠是odd、even、數字或者 公式 an + b（n 是計數器，從 0 開始，b 是偏移值）。還有:first-of-type和:last-of-type兩種寫法　　

　　

三十5、IOS APP webview中的h5頁面中的fixed在底部的dom元素顯示不全或者被截掉不顯示問題

一、先肯定是否是IOS webview 64像數下移的問題。若是是的話讓ＩＯＳ開發修復bug。

二、能夠設置塊元素padding-bottom及fixed塊元素bottom略高一點讓其顯示出來，以下：

            if(navigator.userAgent.match(/iPhone|iPod|iPad/i)){
                document.querySelector('.body_el').style.paddingBottom = '2rem';
                document.querySelector('#fixed_el').style.bottom = '2.4rem';
            }

 

三十6、兼容微信音頻播放。

            <audio controls="controls" style="display:none;" id="count_sound" preload="auto" autoplay="autoplay" src="dist/sound/demo.mp3">
                Your browser does not support the audio tag.
            </audio>
<script>
        //通常狀況下，這樣就能夠自動播放了，可是一些奇葩iPhone機不能夠，iphone對mp3的容錯很差，因此有些mp3在安卓能夠播但在iphone不能播，要注意mp3質量
        document.getElementById('count_sound').play();
        //必須在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
        document.addEventListener("WeixinJSBridgeReady", function () {
            document.getElementById('count_sound').play();
        }, false);
</script>

 

三十7、相鄰帶背景圖的兩個元素，用負數margin會出現背景疊加。

相鄰帶背景圖的兩個元素儘可能少用負數margin

 

三十8、background-size設爲100% auto時repeat背景在部分華爲手機沒效問題。

解決方案：能夠不用auto設爲固定大小

 

background: url(../img/fkjz/repeat.png) repeat-y; background-size: 100% 1px;

 

三十9、彈框裏的滾動條滾動時，外部body也跟着滾動的問題。

解決方案：彈框彈出時，能夠把body的position設爲absolute;top:0;left:0;

四10、Rem單位設置的小圓圈在安卓手機上不圓的問題。

解決方案：用js動態添加樣式，以下代碼，

    // 修復圓點不圓
    function fixedCircles() {
        var rootRem = document.querySelector('html').style.fontSize.replace('px', '');
        var width_middle = parseInt(rootRem * 0.213),
            width_small = parseInt(rootRem * 0.16);
        $('<style>.distribution ul li span:before{width: ' + width_middle + 'px;height: ' + width_middle + 'px;-webkit-border-radius: 50%;border-radius: 50%;}.records .band:before{width: ' + width_small + 'px;height: ' + width_small + 'px;-webkit-border-radius: 50%;border-radius: 50%;}</style>').appendTo('head');      
    }

四11、在ios的webview中使用fixed在頂部的內容致使下拉刷新被阻擋問題。

解決方案：用js動態設置爲abolute，放手後再設爲fixed

.fixedTopObj.abs {
    position: absolute;
}
.fixedTopObj{
    position: fixed;
    top:0;
    left:0;
}

        var $fto= document.querySelector('.fixedTopObj');
            window.addEventListener('scroll', function (event) {
                var currentST = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                if (currentST <= 0) {
                    if (!$fto.classList.contains('abs')) {
                        $fto.classList.add('abs');
                    }
                } else {
                    if ($fto.classList.contains('abs')) {
                        $fto.classList.remove('abs');
                    }
                }
            }, false);

 

四12、web中彈出彈框後，要求滾動彈框內容時，背景元素不能滾動，關閉彈框後要求背景元素位置保持不變解決方案

解決方案：用js動態設置body、body的子元素pageview包層的樣式，代碼以下：

html代碼：

<body>
<div class="pageview"></div>
</body>

js/jQuery代碼：

            $('#dlg_btn__open').click(function () {
                // ...其餘處理
                var st = $(window).scrollTop();
                $('body').css({ height: '100%', overflowY: 'hidden' }); // 背景固定
                $('.pageview').css({ position: 'fixed', top: (-1 * st) + 'px' }); // 背景固定
            });
            $('#dlg_btn__close').click(function () {
                // ...其餘處理
                var st = $('.pageview').css('top').replace('-', '').replace('px', '');
                $('body').css({ height: 'auto', overflowY: 'visible' });// 取消背景固定
                $('.pageview').css({ position: 'relative', top: 0 });// 取消背景固定
                window.scrollTo(0, st);// 滾到原來位置
            });

　　

四十3、overflow:auto及overflow:scroll的區別

overflow:auto是當超出特定塊內高度或者寬度時纔出現滾動條，overflow:scroll是總時顯示滾動條

四十4、H5,CSS3,js動畫FPS(幀頻)要達到60纔不會感受到卡

　　

四十5、如何使用HSL(H,S,L)來設置顏色？

background-color: hsl(360, 100%, 50%);
/*
HSL(H,S,L):
H：Hue(色調)。0(或360)表示紅色,30表示橙色，60表示黃色，120表示綠色，240表示藍色，270表示紫色，300表示粉色，也可取其餘數值來指定顏色。取值爲：0 - 360
S：Saturation(飽和度)。取值爲：0.0% - 100.0%
L：Lightness(亮度)。取值爲：0.0% - 100.0%
*/

 

四十6、pointer-events，一個神奇的css屬性

對某一個元素好比div採用div{pointer-events:none}便可讓這個HTML元素（包括它的全部子孫元素）失去全部的事件響應。鼠標焦點會直接無視它，click、mouseover等全部事件會穿透它到達它的下一級元素，適用於要用到遮罩或者裝飾用的頂層元素，但其不能阻擋下層元素的點擊事件的狀況。

 

四十7、CSS3屬性-webkit-font-smoothing字體抗鋸齒渲染

[class^="weui-icon-"], [class*=" weui-icon-"] {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

 

一般是icon文字須要用到，如weui

 

四十8、white-space 屬性設置按內容的空白及換行原樣顯示

.like-pre { 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

 

四十9、數字badge由圓圈到圓角橢圓自動伸長技巧

.round {
    background-color: #28a745;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
}

 

五10、移動端h5頁面必須重置的樣式及meta設置

<!--從HTTPS的網站跳轉到HTTP的網站時，瀏覽器是不會發送referrer；這個referrer丟失會致使廣告流量監控不了，或者有些頁面跳轉安全會依賴於referrer時則校驗失敗-->
<meta content="always" name="referrer">

    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">

 

* {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    list-style: none;
}

html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="disabled"] {
    -webkit-appearance: none;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /*抗鋸齒*/

 

五11、指定SVG元素path的渲染模式:shape-rendering

auto讓瀏覽器自動權衡渲染速度、平滑度、精確度。默認是傾向於精確度而非平滑度和速度。optimizeSpeed偏向渲染速度，瀏覽器會關閉反鋸齒模式。（速度）crispEdges偏向更加清晰銳利的邊緣的渲染。瀏覽器在渲染的時候會關閉反鋸齒模式，且會讓線條的位置和寬度和顯示器邊緣對齊。（銳度）geometricPrecision偏向渲染平滑的曲線。（平滑）

 

shape-rendering: geometricPrecision:

shape-rendering: optimizeSpeed

 

<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100"
  shape-rendering="optimizeSpeed"><!-- 這個示例在Firefox下看區別更明顯 -->

<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100"
  style="shape-rendering:optimizeSpeed;">

 

五12、解決ios下的微信打開的頁面背景音樂沒法自動播放

<audio id="Jaudio" class="media-audio" src="bg.mp3" preload loop="loop"></audio >
function audioAutoPlay(id){
    var audio = document.getElementById(id);
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
    }, false);
}
audioAutoPlay('Jaudio');

 

五十3、iphoneX安全區域問題

http://www.javashuo.com/article/p-sxqjzvtz-en.html

 

五十4、flex-wrap: wrap相對較舊版本手機自帶瀏覽器不換行問題如何解決？

對於父元素有必要就text-align:center；子元素就設置display:inline-block。

五十5、段落縮進及字間間距樣式:text-indent及letter-space

p{
  letter-space: 1px; 
  text-indent: 60px;
}

段落字間間隙1px，首行縮進60px（差很少兩個字）

 

五十6、flex佈局子元素在低版本安卓機上justify-content:space-between失效問題

先檢查子元素是否是塊元素，若是不是設置display:block就能夠解決問題

 

五十7、如何解決移動端hover的問題？

思路一：用:active代替，直接能夠解決，最快。

思路二：用js綁定button、a標籤等對象的touchstart,touchend和click事件來動態增減樣式

        <button
          class="btn"
          @click="addFeedback"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >按鈕</button>

    touchStart (e) { // 優化移動端hover體驗
      try {
        e.target.classList.remove('btn--blur')
      } catch (error) { }
    },
    touchEnd (e) { // 優化移動端hover體驗
      try {
        e.target.classList.add('btn--blur')
      } catch (error) { }
    },
    click (e) { // 優化移動端hover體驗
      try { 
        e.target.classList.remove('btn--blur')
        setTimeout(() => {
          e.target.classList.add('btn--blur')
        }, 500)
      } catch (error) { }
    },

 

.btn {
  display: block;
  width: 100%;
  height: 100%;
  font-family: PingFangSC-Regular;
  font-size: 30px;
  text-align: center;
  background: #018fff;
  border: none;
  padding: 0;
  margin: 0;
  &:hover {
      background: rgb(0, 97, 172);
  }
  &--blur:hover {
      background: #018fff;
    }
  }
}

　　

五十8、寫向上滾動動畫時使用僞元素用做漸變透明遮罩圖層時會出現底邊閃爍問題

解決方法是使用div代替僞元素勝任漸變透明遮罩，並增長負值bottom

  &__cover {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 1) 100%
    );
    position: absolute;
    bottom: -25px; 
    left: 0;
  }

 

修復後效果以下，向上滾動時底部沒閃爍問題出現了：

 

五十9、給tbody設置transform屬性致使thead的z-index 無效問題?

 

不用定義 z-index ，因此把 position 也刪了。爲 thead
定義 transform: translate3d(0px, 0px, 1px)Z 軸比 tbody 高。
這方式要想在chrome有效還要作多一步，就是html的結構要稍變一下把thead與tbody的順序調換一下就能夠了

　　

六10、web font-size選擇，web設計稿寬度通用選擇?

font-size選擇，移動端使用像數16px爲基準作rem，PC端使用12px

設計稿寬度：PC端寬度發展960px -> 1200px -> 1400px ->19200px 

                      移動端通用稿寬度750px

參考：https://www.ui.cn/detail/218904.html

 

六11、iPhoneX適配問題

參考：https://segmentfault.com/p/1210000012391116/read

也能夠用媒體查詢針對性設置