前端页面布局常见问题/已踩过的坑大杂烩

时间 2019-12-14

标签前端页面布局常见问题大杂烩繁體版

原文原文链接

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适配问题 javascript

1、IE8下[图片加文字]展现时自动换行的问题

问题以下图所示：css

Html代码以下：html

<div class="flag">
     <img src="static/img/flags/f_2.png"> 免税仓发货 </div>

CSS样式java

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

IE8下文字自动换行，其余浏览器都没问题android

解决方案以下：ios

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

2、设置了z-index无效

设置元素的样式中，position属性值为absolute、relative或fixed时，用z-index设置层叠位置才有效。且属性参数值越大，则该元素被层叠在最上面。git

3、当文字超出范围时自动补...省略号

１、CSS2只能实现单行补略github

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

二、CSS3能够实现多行补省略号,以下面3行补省略,注意控制好height与line-heightweb

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就能够实现水平居中。垂直居中则以下：chrome

注意：这些方法对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

也能够用媒体查询针对性设置