Webapp开发中遇到的一些坑

• position: fixed 和 CSS3 Transform在某些浏览器里面依然有冲突，别滥用，解决方案是不用transform或者用absolute的方案代替fixed
• 在ios6中，display: flex和-webkit-overflow-scrolling: touch不兼容，原生滚动不生效
• 对于一些可组合的属性如background，从兼容性的角度来看，还是分开写比较好。以下代码经测试无法在安卓2.3系统正常显示：background: #f60 url(/images/Logo.png) no-repeat 50% 50% / auto 28px;
• img元素如果用inline-block的形式来显示，即使父元素的font-size: 0，img元素之间（在IE8）依然会有上下间隙。解决办法是1.display: block 2.float: left 3.把电脑砸了
• 移动浏览器中禁用『长按弹出连接』功能：-webkit-touch-callout: none
• 在angularjs使用$cookies服务时候，可用$cookieStore来存储对象，而不是直接用$cookies
• minimal-ui 可以使安卓4的菜单栏隐藏，好爽。<meta name="viewport" content="..., minimal-ui">
• 有时候，我们的body明明是overflow-x: hidden的，那么为什么有时候position: absolute; right: -100%;的元素还会被显示呢？秘密就是，这个元素有显示尺寸，如果width: 0; height: 0; padding: 0; margin: 0;那么窗口就不能横向滚动的了。适用于做右侧机翼的情况，参考宏琪商城

转载于:https://my.oschina.net/tommyfok/blog/338706