样式中踩过的坑

仅用于记录自己在样式中踩过的坑

1、  图片上的按钮与图片本身分隔开，样式设定后在不同型号的手机上表现不同，可能存在缩放。（兼容问题），建议：按钮跟背景图在一张图片上，html中写一个空的div 宽高与按钮的宽高一致，定位到按钮，然后js中操作div。

2、  在css中animation实现的进度条和js中实现的进度（百分之多少）在网速不好时显示不同步。最可能的情况是animation完成后js还没有执行完，导致进度条图片显示完全，数字却显示80%（或其他）。建议：进度条图片在css中定义width为0%，在js中设置进度条图片div的width为进度值，实现图片和数字同步。

3、  页面有滚动条，弹框后有遮罩层。弹框后遮罩后的页面还是可以滑动，要求遮罩后页面不可滑动。解决方法：遮罩时给body加class，样式为overflow:hidden，无遮罩时body去掉该class。

4、  width:100%;text-align:center;文字居中在部分浏览器(firefox、ie等)中不兼容，会使页面宽度变成200%。解决方法：样式改为left: 50%;

 transform: translateX(-50%);

    -o-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

-webkit-transform: translateX(-50%);

5、  前端页面在不同宽高的屏幕、不同分辨率下的兼容适配问题。建议：根部div设置min-width、max-width；页面中的div嵌套定位考虑使用百分比%；多个需要使用绝对定位的div放置在一个div中来总体改变绝对位置。   

 

 

 

 

6、  h5的audio标签的autoplay="autoplay"使音频自动播放，会使js中的audio.pause()方法无效。建议：autoplay的属性不写在audio标签上，在js里设置audio.setAttribute("autoplay", 'true');

 

 

7、  使有高度的div中（不确定高度的）文字垂直居中显示。建议：设置父级div的display为table，子级div的display为table-cell  vertical-align为middle，再进行其他相关设置。例：

<li class="five-li">
    <div class="act_img"><img class="lazy" src="../img/activity5.png" height="240" width="90%" alt="vip平台券"/></div>
    <div class="bottom_div">
        <div class="subwrap">
            <div class="wrapcontent">
                活动亮点中图片的描述活动亮点中图片的描述
            </div>
        </div>
    </div>
</li>

.bottom_div {
    width: 90%;
    height: 100%;
    overflow-y: hidden;
    border-radius: 26px;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 16px;
    font-family: "宋体";
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
    display: none;
}
.bottom_div .subwrap {
    display: table-cell;
    vertical-align: middle;
}

.bottom_div .subwrap .wrapcontent{
    max-height: 240px;
    overflow: hidden;
}

 

8、  inline-block之间有4px或8px的间距，去除这个间距的建议（例子）：在设置display:inline-block元素的父级上添加letter-spacing:-4px;word-spacing:-4px;font-size:0px;，重置父级的字体为0；再设置inline-block所属元素的样式。

 

9、  已知div的宽高，设置div中img水平和垂直居中，img的宽高不确定。解决方法：设置div的display为table-cell;vertical-align为middle；img的样式设置为display:block;margin:0 auto; 另：如果div的position为absolute的话没效果，可设置为relative。

.company-logo {
    position: relative;
    top: 400px;
    left: 61px;
    width: 182px;
    height: 182px;
    display: table-cell;
    vertical-align: middle;
}

.company-logo img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
} 

 

10、              Css样式代替图片

11、              css的animation在ie中无效，原因：设置问题。

@keyframes fromTop
{
    0%   {left:895px; top:-340px;}
    100% {left:895px; top:0;}
}

@-ms-keyframes fromTop /* ie */
{
    0%   {left:895px; top:-340px;}
    100% {left:895px; top:0;}
}

@-moz-keyframes fromTop /* Firefox */
{
    0%   {left:895px; top:-340px;}
    100% {left:895px; top:0;}
}

@-webkit-keyframes fromTop /* Safari and Chrome */
{
    0%   {left:895px; top:-340px;}
    100% {left:895px; top:0;}
}

@-o-keyframes fromTop /* Opera */
{
    0%   {left:895px; top:-340px;}
    100% {left:895px; top:0;}
}

 

由于有两个地方用到了同样的动画，所以把animation的css写在js代码中了。

var animationCss = {
    'animation': 'fromTop .5s linear 0s 1 normal',
    '-ms-animation': 'fromTop .5s linear 0s 1 normal',
    '-moz-animation': 'fromTop .5s linear 0s 1 normal',
    '-webkit-animation': 'fromTop .5s linear 0s 1 normal',
    '-o-animation': 'fromTop .5s linear 0s 1 normal'
};

'animation': 'fromTop .5s linear 0s 1 normal running',在动画的后面加了running时在ie中无效.但是animation-play-state属性默认的值是running
（不知道为啥ie上动画无效，也不知道为啥又有效了。。。只知道是设置问题）