css各种坑

1、inline-block元素自带的4px边距

设置父元素font-size:0;letter-spacing:-4px;
然后设置子元素正常的font-size和letter-spacing;

2、某些手机自带浏览器不支持css属性缩写

css属性尽量分开写，比如background: url(xxx.jpg) no-repeat 0 0/100% 100%;
改为background: url(xxx.jpg) no-repeat;background-position: 0 0;background-size: 100% 100%;

3、在line-heigth：1 手机页看 文字会被截取一端

可以在全局加上padding:1px

4、默认图用css完成

可用两层相对定位控制层级显示，底部写默认图，上面写背景图，当背景图没有的时候，看到的就是默认图。

5、浏览器默认会根据当前屏幕方向和内容自动调整内容的字体大小，导致横屏后字体变大

css设置如下：
-webkit-text-size-adjust : none ;
-moz-text-size-adjust : none ;
-ms-text-size-adjust : none ;
text-size-adjust : none;

6、移动端 border-radius:100%,不圆。

保证圆的大小为双整数

7、移动页面在 UC 浏览器，会莫名的移除底部元素

  <div class="footer"> 元素在上线之后，会很随机的出现和消失，没有规律。可以改class名称, footer 改为 xxx-footer 后发现问题解决了。

8、多行超出部分隐藏

//多行超出部分隐藏 (使用：距离不够可以手动添加伪类 padding 或 bottom 覆盖)
.text-more-overflow
    overflow: hidden
    position: relative
    text-align: justify
    &::after 
        content: " ... "
        font-weight: bold
        position: absolute
        bottom: 1px
        right: 0
        padding: 0 1px 1px 2px
        background: #fff

9、移动端1px

边框
:before, :after与transform
frozenUI的圆角边框就是采用这种方式, 构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%. 
.radius-border{
   position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .radius-border:before{
        content: "";
        pointer-events: none; /* 防止点击触发 */
        box-sizing: border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border-radius: 8px;
        border:1px solid #999;
        -webkit-transform(scale(0.5));
        -webkit-transform-origin: 0 0;
        transform(scale(0.5));
        transform-origin: 0 0;
    }
}
横线
/*1px-border-bottom*/
.border,
.border-radius{
    position: relative;
}
@media (-webkit-min-device-pixel-ratio: 2){
    .border{
        border: none;
        background-image: -webkit-linear-gradient(90deg,#d9d9d9,#fff 50%,transparent 50%);
        background-image: -moz-linear-gradient(90deg,#fff,#d9d9d9 50%,transparent 50%);
        background-image: -o-linear-gradient(90deg,#d9d9d9,#fff 50%,transparent 50%);
        background-image: linear-gradient(0,#fff,#d9d9d9 50%,transparent 50%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom
    }
}

10、css实现横竖屏旋转样式切换

@media all and (orientation : landscape){
  横向css
}
@media all and (orientation : portrait){
  纵向css
}

11、ie9以下不支持伪类清除 浮动

使用原始方法清除.clear{ clear:both}