淘宝触屏版宝贝详情改造（一）

经历了将近2个月的时间，宝贝详情的改造终于完成，已经在前段时间上线了，接下来总结一下在项目过程中前端的一些实现。

    提示：css3的属性目前浏览器都只要加私有前缀才能支持（如firefox：-moz，chrome & safari & android & ios：-webkit，opera：-o等）
 

    元素宽度自适应

    之前做pc端的时候写过一篇宽度自适应的文章 完美实现两个div并排且宽度为50%，不足的是不灵活，如果一行元素由3个变成2个，为了改变样式就需要一定的判断了。现在有了display:box，一切就变得简单了。

parent {display : box;}
children {box-flex : 1;}

    *需要自适应的子元素必须是display:block or box，否则无效
    *若需子元素间保持宽度一致，需设置width:100%
 

    单行文本溢出显示...

element{text-overflow : ellipsis;white-space : nowrap;overflow : hidden;}

    多行文本溢出显示…

element{-webkit-line-clamp : 2;box-orient : vertical;}

    *元素必须是display:box，否则无效
 

    文字水平垂直居中

element{box-pack : center;box-align : center;}

    *元素必须是display:box，否则无效
 

    图片水平垂直居中

    一开始我认为通过设置display:table-cell，加上vertical-align:middle就可以解决垂直居中的问题，但是后来发现改变了display后会影响到本身的布局了，所以推荐下面这种方式。

    img vertical-align : middle;
    parent : after{
        content : " ";       
        visibility : hidden;
        display : inline-block;
        height : 100%;
        vertical-align : middle;
    }

    手机上的点击反馈

    去掉浏览器默认的反馈，-webkit-tap-highlight-color : rgba(0,0,0,0);
    *不需要点击反馈，不用a标签(UC下问题)；
    *使用了delegate，建议使用a或者button； 
    *ipad下必须设置在绑定事件的元素上。
 

    transform闪动问题

parent {-webkit-backface-visibility : hidden;}
children {-webkit-transform-style : preserve-3d;}

    *android下会出现一些问题（click失效、input重影等）；
    *可使用-webkit-transform : translate3d(0,0,0)替代。

本文转自：http://www.caoren.net/article/?id=44