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

目錄

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

本文同步發布於http://www.kt5.cn/fe/2019/11/04/layouts/

一、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;

二、設置了z-index無效

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

三、當文字超出范圍時自動補...省略號

１、CSS2只能實現單行補略

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

2、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;

四、實現垂直居中

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

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

1、CSS2實現

1.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.2、行級/塊級通用

/**方式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;

 

2、CSS3實現

2.1、行級/塊級通用設置父元素,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.2、定位方式使上下左右居中

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

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

 

 五、實現無縫十字邊框

　1、用border實現，樣板如下：

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

 2、用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>

 六、Iphone APP Webview中 A標簽失效問題

給a標簽加上手勢就可以解決

a{cursor:pointer;}

 七、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>

八、如何能讓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手機樣式*/ 
    }

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

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

十、如何用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;
}

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

input {
    border-radius: 0;
}

十二、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自身

例子如下：

　　

十三、修改滾動條樣式

/**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 */ }

　　

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

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

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

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

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

十六、新版的安卓版微信在鍵盤彈出時不會觸發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);
            });

 

十七、移動端近似解決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像互的線縮小一半讓線看上去細小一點

 

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

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

 

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

處理方法是給input增加display為block或者inline-block就可以了

 

二十、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);
}

 

二十一、華為手機虛擬鍵盤擠壓屏幕高度

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

 

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

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

 

二十三、流式部局

部局和設計時要考慮

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;

 

　　

二十四、進度條

 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;
            }
        }
    }

　　

二十五、文字描邊

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;

　　

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

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

　　

二十七、CSS3背景色漸變

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

　　

二十八、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); /*內陰影或內發光*/

　　

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

 

.clickable {
　　cursor: pointer;
}

 

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

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

 

三十一、華為自帶瀏覽器 不支持流式布局

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

 

三十二、transition動畫中用left制作動畫可能會出現卡卡的不流暢

解決方案：使用translate3D方式制作動畫就可以了。　

 

三十三、像素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';
        }

　　

三十四、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兩種寫法　　

　　

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

1、先確定是不是IOS webview 64像數下移的問題。如果是的話讓ＩＯＳ開發修復bug。

2、可以設置塊元素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';
            }

 

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

            <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>

 

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

相鄰帶背景圖的兩個元素盡量少用負數margin

 

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

解決方案：可以不用auto設為固定大小

 

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

 

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

解決方案：彈框彈出時，可以把body的position設為absolute;top:0;left:0;

四十、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');      
    }

四十一、在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);

 

四十二、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);// 滾到原來位置
            });

　　

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

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

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

　　

四十五、如何使用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%
*/

 

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

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

 

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

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

 

通常是icon文字需要用到，如weui

 

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

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

 

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

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

 

五十、移動端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; /*抗鋸齒*/

 

五十一、指定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;">

 

五十二、解決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');

 

五十三、iphoneX安全區域問題

https://www.cnblogs.com/lolDragon/p/7795174.html

 

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

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

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

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

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

 

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

先檢查子元素是不是塊元素，如果不是設置display:block就可以解決問題

 

五十七、如何解決移動端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;
    }
  }
}

　　

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

解決方法是使用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;
  }

 

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

 

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

 

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

　　

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

font-size選擇，移動端使用像數16px為基准做rem，PC端使用12px

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

                      移動端通用稿寬度750px

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

 

六十一、iPhoneX適配問題

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

也可以用媒體查詢針對性設置

六十二、ios的input屬性disabled有默認樣式問題，主要是透明度問題

表單不可編輯狀態-ios的input的屬性設置為disabled，會造成字體顏色變灰

解決辦法，設置字體顏色，並對透明度設置為1 

 

        input:disabled,
        input[disabled] {
          color: #000;
          -webkit-text-fill-color: $dark-gray;
          -webkit-opacity: 1;
          opacity: 1;
        }

 

另擴展：input默認有padding與margin，也要重設為0

六十三、新版微信安卓版7.0.6前端布局要注意的新問題

問題：做h5活動頁面，一屏顯示所有內容，使用絕對定位，中間有輸入區域，打開輸入法時，低部內容往上移把輸入區域遮擋住。（新版微信特性：打開了輸入法時，全屏的高度變小了）

解決方式：使用z-index。把需要強制顯示的內容的z-index設大一點，以免被下面上移的內容遮擋住。

 

六十四、select、input[type=number]隱藏PC瀏覽器右邊默認操作按鈕

 

select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    -ms-appearance:none;
    border: 0;
} 
select::-ms-expand { 
    display: none; 
}

input[type=number] {  
    -moz-appearance:textfield;  
}  
input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    margin: 0;  
}