前端页面切图布局常见问题

发布于 2019年11月4日 (更新时间： 2022年2月16日) by 博主

一、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浏览器右边默认操作按钮
六十五、微信H5页面强制清除缓存设置
六十六、href 的令一种写法
六十七、如何查看一个URL是否命中CDN缓存
六十八、网页适配 iPhoneX
六十九、CSS3 width：fit-content 属性把内容包裹

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

  .test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }

十四、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:geometricPrecision

shape-rendering: optimizeSpeed

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

六十五、微信H5页面强制清除缓存设置

解决方式：在head标签头部添加下面meta数据

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

六十六、href 的令一种写法

<div onclick="javascript:window.location.href='https://www.baidu.com'">

六十七、如何查看一个URL是否命中CDN缓存

按 F12 主要查看响应头信息中的“X-Cache”字段。
显示“MISS”，说明没有命中CDN缓存，是回源的。
显示“HIT”，是命中了CDN缓存。

六十八、网页适配 iPhoneX

1、修改 viewport 添加 viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

2、修改样式

padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

详细参考：https://blog.csdn.net/qq_42354773/article/details/81018615

六十九、CSS3 width：fit-content 属性把内容包裹

使用 CSS3 width: fit-content 属性把内容包裹 sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

没有使用 CSS3 width: fit-content 属性把内容包裹 sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

浏览次数: 5,713

目录